Vue Router详解，Vue Router钩子函数详解

廉鸿运

2023-12-01

想必来查看笔者的这篇Vue Router文章的人，应该了解什么是Vue Router，至少知道其的作用是路由映射，所以笔者在这里不再赘述。
假设我们现在有一些简单的vue组件，
MyHeader.vue:

<template>
  <div class="container">
    this is header of each page
  </div>
</template>

<script>
export default {
  name: "my-header"
}
</script>

index.vue：

<template>
  <div>
    <div class="container">this is home page</div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

second.vue:

<template>
  <div>
    <div class="container">this is second page</div>
    <span>{{id}}</span>
  </div>
</template>

<script>
export default {
  name: "second"
}
</script>

这三个组件中的container样式一样：

<style lang="scss" scoped>
.container{
  border: #bfbfbf 1px solid;
  width: 200px;
  height: 100px;  
  margin:10px 0;
}
</style>

1. 构建基本的router

我们希望我们的单页面由my-header和一个index / second组件组成，页面中展示 index / second 需要使用router来解决。
router.js：

import Vue from 'vue'
import VueRouter from 'vue-router'

import index from "../view/index"
import second from "../view/second"

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path:'/home',
    name: 'home',
    component: index,
  },{
    path:'/second',
    name: 'second',
    component: second,
  }
]

let router = new VueRouter({
    mode: 'history',
    routes
}

export default router

这就是一个简单的router，当我们导航到指定路径时，<router-view/> 标签就会被相应的component组件替换。
我们这里在router.js直接引入了组件，为了提高带宽利用率，提高性能，我们使用动态引入的方式来加载模块：

//import second from "../view/second"
//component: second
component: () => import('../view/second')

注意：如果使用了异步加载组件的方式，我们需要使用@babel对此语法进行解析：

npm install --save-dev @babel/plugin-syntax-dynamic-import

修改babel配置：

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

为了方便路由切换，我们在my-header组件中增加两个router-link:

<template>
  <div class="container">
    this is header of each page
    <router-link to="/name">index</router-link>
    <router-link to="/second">second</router-link>
  </div>
</template>

在App.vue中使用router-view标签占位：
App.vue:

<template>
  <div>
    <my-header/>
    <router-view/> 	//被替换成相应的component组件
  </div>
</template>
<script>
import MyHeader from "./components/MyHeader";
export default {
  name: 'app',
  components:{
    MyHeader
  }
}
</script>

但是，我们这里不推荐在router.js中最后抛出一个router，而是使用工厂模式返回一个构建router的函数。
修改router.js:

export default () => {
  return new VueRouter({
    mode: 'history',
    routes
}

同时修改index.js，调用函数构建router:

import Vue from 'vue'
import createRouter from './router/router.js'
import App from './App.vue'

let router = createRouter()

new Vue({
  el:'#app',
  router,
  render:(h)=>h(App)
})

目前为止，我们的页面就能达到我们的期望了，当我们点击一个router-link的时候，页面就会展示相应的组件。

2. VueRouter的构建选项：

当我们创建一个可以被Vue应用程序使用的路由实例时，不止可以设置mode和routes，当然这是我们最常使用的连个配置项，但是，其实我们还可以实现更多的功能：

export default () => {
  return new VueRouter({
    mode: 'history',
    routes,
    //当返回到之前浏览过的页面时，视图保持在之前的位置
    scrollBehavior(to, from, savedPosition){
      if (savedPosition){
        return savedPosition
      }else {
        return { x: 0, y: 0 }
      }
    },
    // parseQuery(query){
    //   //自定义将query转换为对象
    // },
    // stringifyQuery(obj){
    //   //自定义将obj转为字符串
    // }
    // fallback: true //当浏览器不支持history时，使用hash路由
    //linkActiveClass  用于激活的 RouterLink 的默认类。
    //linkExactActiveClass 用于精准激活的 RouterLink 的默认类。
  })
}

3. 改变路由

3.1 直接更改地址栏

http://localhost:8090/home => http://localhost:8090/second

注意：因为我们设置了mode为history，所以我们直接更改地址栏会出现404 Not Found，这是因为我们并不存在**/second文件，而浏览器却发起了对/second文件请求，所以，我们还需要在devServer**的配置中设置：

devServer: {
	...
    historyApiFallback: {
      index: '/index.html'
    },
    ...
  }

3.2 this.$router.push()

this.$router.push('/second')

3.3 router-link

就像我们在my-header组件中写的：

<router-link to="/name">index</router-link>
<router-link to="/second">second</router-link>

4. 参数传递

4.1 使用params

router.js:

{
    path:'/second/:id/:tag',
    name: 'second',
    component: () => import('../view/second')
}

my-header:

<template>
	...
	<div @click="routerPush('second',{id:123, tag:'tagA'})">this is header of each page</div>
	<router-link to="/second/2123/tagB">second</router-link>
	<router-link :to="{name: 'second',params: {id:123, tag:'tagC}}">index</router-link>//存在参数绑定，需要使用v-bind:
	...
</template>
<script>
export default {
  name: "my-header",
  methods:{
    routerPush(name, params, query){
      this.$router.push({
        name: name,
        params:params,
        query: query
      })
    }
  }
}
</script>

获取参数：

this.$route.params.id

4.2 使用query

router.js:

{
    path:'/second',
    name: 'second',
    component: () => import('../view/second'),
}

my-header:

<template>
	...
	<div @click="routerPush('second', {}, {id:123, tag:'tagA'})">this is header of each page</div>
	<router-link :to="{name: 'second',qurey: {id:123, tag:'tagC}}">index</router-link>//存在参数绑定，需要使用v-bind:
	<router-link to="/second/?tag=2123">second</router-link>
	...
</template>
<script>
export default {
  name: "my-header",
  methods:{
    routerPush(name, params, query){
      this.$router.push({
        name: name,
        params:params,
        query: query
      })
    }
  }
}
</script>

参数获取：

this.$route.query.tag

4.3 使用props传参将组件和route解耦（推荐）

使用上面两种方式传参，如果我们需要在组件中使用传入的参数，我们都需要使用this.$route来获取，也就是说，如果我们这时候要将组件拿到另一个组件中使用时，仍然需要使用this.$route来获取数据，但是此时是做不到的。
我们可以使用props将组件和router解耦：
router.js:

{
    path:'/second/:id',
    props:true,
    name: 'second',
    component: () => import('../view/second')
}

在改变路由时，和使用params类似，但是在获取数据时，我们可以通过组件的props获取：
second.vue:

<template>
  <div>
    <div class="container">this is second page</div>
    <span>{{this.id}}</span>
  </div>
</template>

<script>
export default {
  name: "second",
  props: ['id']
}
</script>

现在，我们可以通过使用this.id来获取传入的参数，而不是使用this.$route.params.id。
这时候，我们的second组件不仅可以用作路由组件，还可以在其他组件中复用。

5. 命名视图

有时候，我们一个路由中可能不止一个router-view，这时候我们需要对其命名来区别：
App.vue:

<template>
  <div>
    <my-header/>
    <router-view/>
    <router-view name="a" />
  </div>
</template>
<script>
import MyHeader from "./components/MyHeader";
export default {
  name: 'app',
  components:{
    MyHeader
  }
}
</script>

同时在router.js中分别设置对应的组件：

  {
    path:'/more',
    name: 'more',
    components: {
      default: index,
      a: second
    }
  }

6. 路由导航守卫

6.1 全局守卫

在index.js(你们的入口文件可能是main.js)中设置全局守卫：

router.beforeEach((to,from,next)=>{
  next()
})
router.beforeResolve((to,from,next)=>{
  next()
})
router.afterEach((to,from)=>{
  
})

beforeEach和beforeResolve钩子函数具有相同的参数，to：目标地址，from：当前地址，next: 下一步，afterEach是在每一个导航之后执行，所以不需要next()。
调用next()就是继续向下执行，如果不调用next()，那么，router的钩子函数就不会继续向下执行。

导航钩子	触发时机
beforeEach	添加一个导航守卫，在任何导航前执行。
beforeResolve	添加一个导航守卫，在导航即将解析之前执行。
afterEach	添加一个导航钩子，在每次导航后执行。

全局守卫会在每一次路由改变时按照一定顺序执行。

全局守卫有何用处？
就像我们经常使用的一些网站来说，比如，淘宝购物，在我们没有登录之前，我们可以浏览商品，但是当我们需要下订单时，淘宝网会跳转到登录界面。
我们可以设置导航守卫来达到这种效果:

router.beforeEach((to,from,next)=>{
  if(!store.gettes.isLogin){
    next({path: '/login'})
  }else {
    next()
  }
})

6.2 组件内守卫

有时候，我们需要在某个组件中使用导航守卫。

<template>
  <div>
    <div class="container">this is second page</div>
    <span>{{this.id}}</span>
  </div>
</template>

<script>
export default {
  name: "second",
  props: ['id'],
  beforeRouteEnter(to,from,next){
    console.log("beforeRouteEnter")
    // next()//next()之后才会创建组件，所有拿不到this，调用this会报错
    //如果需要使用创建后的组件，可以向next设置回调：
    next(vm =>{
      console.log(vm.$route)
    })
  },
  beforeRouteUpdate(to, from, next){//当使用了同样的路由，不同的参数时，才会触发
    //mounted 只有在该组件首次被挂载时才会触发，所以当我们需要多次进行子组件数据初始化时，这才是最好的选择
    console.log("beforeRouteUpdate")
    next()
  },
  //防止用户误触退出界面
  beforeRouteLeave(to, from, next){
    console.log("beforeRouteLeave")
    if (global.confirm("are you sure?")){
      next()
    }
  }
}
</script>

比如，我们需要填写一个比较大的表单时，如果我们误触到了其他导航，我们希望路由能阻止我们的误触行为：

  beforeRouteLeave(to, from, next){
    console.log("beforeRouteLeave")
    if (global.confirm("are you sure?")){
      //只有当用户确认了需要离开当前位置，我们才进行跳转
      next()
    }
  }

注意：当执行到beforeRouteEnter时，当前组件还没有被创建，所以不能在beforeRouteEnter中获取到this：

  beforeRouteEnter(to,from,next){
    console.log("beforeRouteEnter")
    console.log(this.id) //this is undefined
    next()
  }

beforeRouteEnter(to,from,next){
    console.log("beforeRouteEnter")
    //console.log(this.id)
    //next()
    //如果需要使用创建后的组件，可以向next中传入一个回调：
    next(vm =>{
      console.log(vm.id)
    })
  }

6.3 路由独享守卫

路由独享守卫和全局守卫的作用类似，但是，将其写入了其中的一个路由对象中，只会在这个路由下起作用：
router.js:

...
{
    path:'/second/:id',
    props:true,
    name: 'second',
    component: () => import('../view/second'),
    meta:{
      title: 'second page'
    },
    beforeEnter(to,from,next){
      console.log("second component")
      next()
    }
  }
...

结语

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，我们应该尽量理解深入一些。当然，这里的导航守卫我们可以通过其他方式也能实现类似的效果。