虽然 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 选项的子路由带来副作用。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript JSON模块如何工作，过程是怎样

  本篇文章带大家了解一下ECMAScript 新提案：JSON模块，来看看JSON模块是如何工作的，希望对大家有所帮助！

• 用JS怎样实现魔方动态转换的效果，代码是什么？

  这篇文章给大家分享的是用JS怎样实现魔方动态转换的效果，实现效果及代码如下，是一种酷炫的展示效果，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• 如何用JS实现画笔的功能，代码是什么

  JavaScript实现鼠标移动事件画笔 JavaScript实现鼠标移动事件画笔小游戏,供大家参考,具体内容如下 实现功能 鼠标点击时可以在画板上画画如果鼠标双击那么停止移动进画板颜色改变移除时颜色改变 <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content=" ...

• Vue3中的异步组件如何理解及应用

  这篇文章主要介绍了一文搞懂Vue3中的异步组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下

• 如何理解vue对象的响应式和数组的响应式

  如何理解vue对象的响应式和数组的响应式，下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家，下面我们一起来了解看看吧。