vue-router总结

this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。

this.$route 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, params, query 等属性。

路由激活    .router-link-active
常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 (*) 比如404

带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
this.$route.query.userId

命名的路由
router.push({ name: 'user', params: { userId: '123' }})
this.$route.params.userId

注意：
1.命名路由搭配params，刷新页面参数会丢失
2.查询参数搭配query，刷新页面数据不会丢失
3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值
4.query 参数拼接在url相当于get请求, 用户可修改, params 类似post 用户不可见
5.如果提供了 path，params 会被忽略，path和params不能同时存在

 

 

嵌套路由：在父级组件添加 <router-view/>
路由router.js添加children： 

routes: [
    {
      path: '/',
      // name: 'HelloWorld',
      component: HelloWorld,
      children:[
        {
          path:"/children",
          component:Children
        }
      ]
    }
  ]

 

动态路由

{ path: '/user/:id', component: User }

像 /user/foo 和 /user/bar 都将映射到相同的路由。

 

命名视图

redirect重定向是当前匹配重新匹配          alias别名是当前的拥有多个匹配路径

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

重定向
const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })

重定向的目标也可以是一个命名的路由： const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] })

甚至是一个方法，动态返回重定向目标： const router = new VueRouter({

routes: [ { path: '/a', redirect: to => {

// 方法接收 目标路由 作为参数

// return 重定向的 字符串路径/路径对象

                                              }}

                             ] })

别名
const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})



// vue-router
{ path: '/user/:id', component: User }

路由字符串

router.push('home')

路由对象

router.push({ path: 'home' })



$router : 是路由操作对象，只写对象

$route : 路由信息对象，只读对象

this.$router 实际上 就是全局 路由对象 任何页面 都可以 调用 push(), go()等方法 跳转前进后退

this.$route 表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等属性； 信息

 

 

vue-router路由守卫 

一、全局路由守卫
VueRouter.beforeEach(function (to, from, next) {
  const nextRoute = ['children', 'children', 'children'];
  //跳转至上述3个页面
  console.log(from.name)
  if (nextRoute.indexOf(to.name) >= 0) {
      //未登录 判断to的页面需要登录吗
      if (localStorage.getItem('sessiontoken')){
        // console.log(to.name)
        next()
      }else{
        next({path:"/login"})
      }
  }
  //已登录的情况再去登录页，跳转至首页
  if (to.name === 'login') {
      if (localStorage.getItem('sessiontoken')) {
          VueRouter.push({name: 'father'});
      }
  }
  next();
});

二、组件路由守卫
// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
    // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
    next(vm => {})
}
beforeRouteUpdate (to, from, next) {
    // 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
    // 离开当前路由页面时调用
}
三、路由独享守卫
路由独享守卫是在路由配置页面单独给路由配置的一个守卫

export default new VueRouter({
    routes: [
        {
            path: '/',
            name: 'home',
            component: 'Home',
            beforeEnter: (to, from, next) => {
               // ...
            }
        }
    ]
})