vue-router 4 你真的熟练吗？，3年前端开发工程师面试经验分享

一、安装并创建实例

---

安装最新版本的 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 ，进行路由跳转等操作。

<button @click=“backToHome”>跳转到首页

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

监听路由变化

三、导航守卫

---

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

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内引入需要的插件。