简单笔记 VueRouter

作者: 谢玉胜 | 来源:发表于2020-07-22 19:08 被阅读0次

简单笔记 VueRouter
前端笔记 — VueRouter
路由
基于 Vue.js 的支持本地化储存记事本 SPA
vue-router
Vue Router基础
VueRouter实现原理
VueRouter
VUE学习笔记---初识VueRouter
手写VueRouter简单实现hash路由

核心原理：

将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

定义两个组件

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

形成路由映射

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

.建立路由

const router = new VueRouter({
   routes: routes
})

将路由绑定到视图

const app = new Vue({
  router
}).$mount('#app')

选择视图展示的位置（所绑定的#app）

  <div id="app">
        <router-view/>//这里将渲染显示组件
  </div>

嵌套关系

如果一个组件里面还有动态变化的各种组件，那么就形成了路由嵌套关系！

当我们的组件里面是这样：

const Foo = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      //我也有内嵌组件
      <router-view></router-view>
    </div>
  `
}

那么在定义映射的是时候，就需要这样,加上儿子children

{ path: '/foo', component: Foo,
    children: [
        {
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    
 },

重定向

所谓重定向，就是你访问A地址的时候，直接跳到B地址

{ path: '/a', redirect: '/b' }

路由守卫

当我们访问一个路由地址的时候，我们都会经过一个大门，这个大门就是这个路由守卫，他能看到你之前的哪里的，想去哪里，大门是否让你通过的数据和行为

定义了路由，写入钩子函数（上面写过）

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})
router.afterEach((to, from) => {
  // ...finish，访问结束
})

访问前的钩子函数

router.beforeEach((from ,to,next)=>{
    if (to.path === '/login') {
          next({ path: '/' }) //next函数表示可以GO，还可以带参数哦
        } else {
         next()
      }
    
})