浅学VueRouter

一、$route和 $router的区别是什么？

router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。

二、vue-router 如何传参

// 传递参数
  this.$router.push({
    name: Home，
    params: {
     number: 1 ,
     code: '0'
    }
  })

name: 可以使用path路径

params：只能使用name，不能使用path，参数不会显示在路径上，浏览器强制刷新参数会被清空，

// 接收参数
const q = this.$route.query

query:参数会显示在路径上，刷新不会被清空

三、vue-router响应路由参数的变化, 使用watch检测

// 监听当前路由发生变化的时候执行
watch: {
  $route(to, from){
    console.log(to.path)
    // 对路由变化做出响应
  }
}

四、vue-router有哪些导航钩子：

1.全局钩子--beforeEach、afterEach
beforeEach：全局前置钩子，在跳转之前执行
to:要进入的路由，它是一个路由对象。
from:正要离开的路由，也是一个路由对象
next:必填 next()进入下一个、next(false)中断、next("/")跳转、next(error)传递给 router.onError() 注册过的回调
afterEach:全局后置钩子, 在跳转之后判断
*后置钩子并没有next函数，也不会改变导航本身。

代码实例:

import Vue from ‘vue’
import VueRouter from ‘vue-router’
 
const Home = () => import('../components/Home.vue')
const User = () => import('../components/User.vue')
 
Vue.use(VueRouter)
 
const routes = [
    {
        path: '/home',
        redirect: './home',
        meta: {
            title: '首页'
        }
    },
    {
        path: '/user',
        component: User,
        meta: {
            title: '用户'
        }
    }
]
 
const app = new VueRouter({
    router,
    mode: 'history'
})
 
// 前置守卫(guard)
router.beforeEach((to, from, next) => {
    // 从from跳转到to
    window.document.title = to.matched[0].meta.title;
    next();
})
 
export default router

2.路由独享钩子

beforEnter: 即单个路由独享的导航钩子，它是在路由配置上直接进行定义的：
代码实例:

import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
import Home from '../../view/Home.vue'
import Test from '../../view/Test.vue'
import News from '../../view/News.vue'
export default new Router({
  routes: [
    {
      name:"Home",
      path:"/",
      component:Home,
    },
    {
      name:"Test",
      path:"/test",
      component:Test,
      beforeEnter(to,from,next){
        if(to.path==="/test"){
          alert("请登录");
          next(false); // 禁止跳转
        }else{
          next()
        }
      }
    },
    {
      name:"News",
      path:"/news",
      component:News
    },
    {
      redirect:"/",
      path:"*",
    }
  ],
  mode:"history"
})

3.组件内导航钩子

beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave;

代码片段:

const File = {
    template: `<div>This is file</div>`,
    beforeRouteEnter(to, from, next) {
        // do someting
        // 在渲染该组件的对应路由被 confirm 前调用
    },
    beforeRouteUpdate(to, from, next) {
        // do someting
        // 在当前路由改变，但是依然渲染该组件时调用
    },
    beforeRouteLeave(to, from ,next) {
        // do someting
        // 导航离开该组件的对应路由时被调用
    }
}

beforeRouteEnter 不能获取组件实例 this，因为当守卫执行前，组件实例被没有被创建出来，剩下两个钩子则可以正常获取组件实例 this

但是并不意味着在 beforeRouteEnter 中无法访问组件实例，我们可以通过给 next 传入一个回调来访问组件实例。在导航被确认时，会执行这个回调，这时就可以访问组件实例了，如：

beforeRouteEnter(to, from, next) {
    next (vm => {
        // 这里通过 vm 来访问组件实例，解决了没有 this 的问题
    })
}