Vue-router 4，你真的熟练吗？

虽然 vue-router 4 大多数 API 保持不变，但是在 vue3 中以插件形式存在，所以在使用时有一定的变化。接下来就学习学习它是如何使用的。

一、安装并创建实例

安装最新版本的 vue-router

npm install vue-router@4  或 yarn add vue-router@4 

 安装完成之后，可以在 package.json 文件查看vue-router的版本

"dependencies": {   "vue": "^3.2.16",  "vue-router": "4" }, 

 新建 router 文件夹，新建 index.js文件：

import {  createRouter,createWebHashHistory } from "vue-router"; const routes = [  {    path:,   component:()=>import("../views/login/index.vue")  },  {    path:/home,   component:()=>import("../views/home/index.vue")  } ] const router = createRouter({   history:createWebHashHistory(/),  routes }) export default router 

 然后在main.js 中引入 router 。

import {  createApp } from vue import App from ./App.vue import router from "./router/index" const app = createApp(App) app.use(router) app.mount(#app) 

 注意：之前 component 引入组件的时候，后边可以省略 .vue 后缀，但在 vue-router 4这不能省略后缀，否则就报错了。

二、vue-router4 新特性

2.1、动态路由

addRoute 动态添加路由时，有两种情况，分别为：

//动态添加路由--默认添加到根 router.addRoute({   path:/my,  name:my,  component:()=>import("../views/my/index.vue") }) //动态添加子路由 router.addRoute(my,{   path:/info,  component:()=>import("../views/my/info.vue") }) 

 添加子路由时，第一个属性值是父级路由的 name 属性值。

2.2、与 composition 组合

在 事件中获取 router ，进行路由跳转等操作。

<template>   <button @click="backToHome">跳转到首页</button> </template> <script> import {  useRouter } from "vue-router" export default {   setup(){    const router = useRouter()   return{     backToHome(){      router.push("/")    },   }  } } </script> 

通过 useRouter 获取到路由之后再进行操作。也可以对当前路由route进行操作。以下是监听route.query的亿华云计算案例：

<template>   <div>监听路由变化</div> </template> <script> import {  useRouter,useRoute } from "vue-router" import {  watch } from "@vue/runtime-core" export default {   setup(){    const route = useRoute()   //route时响应式对象，可监控变化   watch(()=>route.query,query=>{     console.log(最新的,query)   })  } } </script> 

三、导航守卫

导航守卫主要用来通过跳转或取消的方式守卫导航，有很多种方式植入路由导航中：全局的、单个路由独享的或者组件级的。

3.1、全局守卫

router.beforeEach((to,from,next)=>{   console.log(全局前置守卫); }) router.afterEach((to,from)=>{   console.log(全局后置钩子); }) 

 与之前的使用都一样，没有任何变化。

3.2、路由独享守卫

router.addRoute({   path:/my,  name:my,  component:()=>import("../views/my/index.vue"),  beforeEnter:(to,from)=>{    console.log(路由独享守卫);  } }) 

3.3、组件内的守卫

组件内的守卫与之前使用不同，vue-router4中，需要从vue-router内引入需要的插件。

<script> import {   onBeforeRouteLeave } from "vue-router" export default {   setup(){   onnBeforeRouteLeave((to,from)=>{    const answer = window.confirm(是否确认离开)   if(answer){     console.log(不离开);    return false   }   })  } } </script> 

四、vue-router4 发生破坏性变化

4.1、实例创建方式

//以前创建方式 const router = new VueRouter({  }) new Vue({   router,  render:h=>h(App) }).$mount("#app") //vue-router4创建方式 import {  createRouter } from "vue-router" const router = createRouter({  }) createApp(App).use(router).mount("#app") 

4.2、模式声明方式改变

//之前 const router = new VueRouter({   mode:"hash" }) //新的 import {  createRouter, createWebHashHistory } from "vue-router" const router = createRouter({   history:createWebHashHistory() }) 

 之前的mode替换成了 history ，它的选项变化分别为：

history -> createWebHistory hash -> createWebHashHistory abstract -> createMemoryHistory

4.3、base属性被合并

base 选项被移至 createWebHistory 中。

//之前 const router = new VueRouter({   base:"/" }) //新的高防服务器 import {  createRouter, createWebHashHistory } from "vue-router" const router = createRouter({   history:createWebHashHistory(/) }) 

4.4、通配符 * 被取消

//之前 {   path:*,  component:()=>import("../components/NotFound.vue") } //vue-router 4 {   path:/:pathMatch(.*)*,  component:()=>import("../components/NotFound.vue") } //是一个正则表达式 

4.5、isReady() 替代 onReady

//之前 router.onReady(onSuccess,onError)//成功和失败回调 //vue-router 4 router.isReady().then(()=>{   //成功 }).catch(err=>{   //失败 }) 

4.6、scrollBehavior 变化

const router = createRouter({   scrollBehavior(to, from, savedPosition) {    // 始终滚动到顶部   return {  top: 0, left:0 }  }, }) //之前使用的{  x:0, y:0 } 替换成了 {  top: 0, left:0 } 

4.7、keep-alive 和 transition 必须用在 router-view 内部

//之前 <keep-alive>  <router-view /> </keep-alive> //vue-router 4 <router-view v-slot="{ component}">  <keep-alive>   <component :is="component" />  </keep-alive> </router-view> 

4.8、router-link 移除了一部分属性

移除 append 属性

//之前 <router-link to="child" append >跳转<router-link> //vue-router 4 <router-link :to="append( $route.path , child )" append >跳转<router-link> 

tag 被移除

//之前 <router-link to="/" tag="span">跳转</router-link> //vue-router 4 <router-link to="/" custom>  <span>跳转</span>   </router-link> 

event 被移除

4.9、route 的 parent 属性被移除

4.10、pathToRegexpOptions选项被移除，其他内容替换

4.11、routes选项是必填项

4.12、跳转不存在的命名路由报错

之前跳转到不存在的路由，页面是空的，会重定向根路径，这是不合理的，所以vue3报错了。

4.13、缺少必填参数会抛出异常

4.14、命名子路由如果 path 为空的时候，不再追加 /

之前生成的 url 会自动追加一个 / ，如："/dash/"。副作用：给设置了 redirect 选项的站群服务器子路由带来副作用。