[[434466]]

雖然 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 選項的子路由帶來副作用。