vue-router 4使用實例詳解
更新時間：2021年11月08日 09:46:49 作者：前端人
雖然 vue-router 4 大多數(shù) API 保持不變，但是在 vue3 中以插件形式存在，所以在使用時有一定的變化。接下來就學(xué)習(xí)學(xué)習(xí)它是如何使用的
雖然 vue-router 4 大多數(shù) API 保持不變，但是在 vue3 中以插件形式存在，所以在使用時有一定的變化。接下來就學(xué)習(xí)學(xué)習(xí)它是如何使用的。
一、安裝并創(chuàng)建實例
安裝最新版本的 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、動態(tài)路由
addRoute 動態(tài)添加路由時，有兩種情況，分別為：
//動態(tài)添加路由--默認添加到根
router.addRoute({
path:'/my',
name:'my',
component:()=>import("../views/my/index.vue")
})
//動態(tài)添加子路由
router.addRoute('my',{
path:'/info',
component:()=>import("../views/my/info.vue")
})
添加子路由時，第一個屬性值是父級路由的 name 屬性值。
2.2、與 composition 組合
在 事件中獲取 router ，進行路由跳轉(zhuǎn)等操作。
<template>
<button @click="backToHome">跳轉(zhuǎn)到首頁</button>
</template>
<script>
import { useRouter } from "vue-router"
export default {
setup(){
const router = useRouter()
return{
backToHome(){
router.push("/")
},
}
}
}
</script>
通過 useRouter 獲取到路由之后再進行操作。也可以對當(dāng)前路由route進行操作。以下是監(jiān)聽route.query的案例：
<template>
<div>監(jiān)聽路由變化</div>
</template>
<script>
import { useRouter,useRoute } from "vue-router"
import { watch } from "@vue/runtime-core"
export default {
setup(){
const route = useRoute()
//route時響應(yīng)式對象，可監(jiān)控變化
watch(()=>route.query,query=>{
console.log('最新的',query)
})
}
}
</script>
三、導(dǎo)航守衛(wèi)
導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航，有很多種方式植入路由導(dǎo)航中：全局的、單個路由獨享的或者組件級的。
3.1、全局守衛(wèi)
router.beforeEach((to,from,next)=>{
console.log('全局前置守衛(wèi)');
})
router.afterEach((to,from)=>{
console.log('全局后置鉤子');
})
與之前的使用都一樣，沒有任何變化。
3.2、路由獨享守衛(wèi)
router.addRoute({
path:'/my',
name:'my',
component:()=>import("../views/my/index.vue"),
beforeEnter:(to,from)=>{
console.log('路由獨享守衛(wèi)');
}
})
3.3、組件內(nèi)的守衛(wèi)
組件內(nèi)的守衛(wèi)與之前使用不同，vue-router4中，需要從vue-router內(nèi)引入需要的插件。
<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 發(fā)生破壞性變化
4.1、實例創(chuàng)建方式
//以前創(chuàng)建方式
const router = new VueRouter({
})
new Vue({
router,
render:h=>h(App)
}).$mount("#app")
//vue-router4創(chuàng)建方式
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)//成功和失敗回調(diào)
//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 內(nèi)部
//之前
<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 >跳轉(zhuǎn)<router-link> //vue-router 4 <router-link :to="append( $route.path , 'child' )" append >跳轉(zhuǎn)<router-link>
tag 被移除
//之前 <router-link to="/" tag="span">跳轉(zhuǎn)</router-link> //vue-router 4 <router-link to="/" custom> <span>跳轉(zhuǎn)</span> </router-link>
event 被移除
4.9、route 的 parent 屬性被移除
4.10、pathToRegexpOptions選項被移除，其他內(nèi)容替換
4.11、routes選項是必填項
4.12、跳轉(zhuǎn)不存在的命名路由報錯
之前跳轉(zhuǎn)到不存在的路由，頁面是空的，會重定向根路徑，這是不合理的，所以vue3報錯了。
4.13、缺少必填參數(shù)會拋出異常
4.14、命名子路由如果 path 為空的時候，不再追加 /
之前生成的 url 會自動追加一個 / ，如："/dash/"。副作用：給設(shè)置了 redirect 選項的子路由帶來副作用。
到此這篇關(guān)于vue-router 4 你真的熟練嗎？的文章就介紹到這了,更多相關(guān)vue-router 4內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
深入解析Vue中的this.$forceUpdate()的使用
this.$forceUpdate()?是一個重要的實例方法,本文主要介紹了深入解析Vue中的this.$forceUpdate()的使用,具有一定的參考價值,感興趣的可以了解一下2024-07-07
iview+vue實現(xiàn)導(dǎo)入EXCEL預(yù)覽功能
這篇文章主要為大家詳細介紹了iview+vue實現(xiàn)導(dǎo)入EXCEL預(yù)覽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
vue3中watch和watchEffect實戰(zhàn)梳理
這篇文章主要介紹了vue3中watch和watchEffect實戰(zhàn)梳理，watch和watchEffect都是vue3中的監(jiān)聽器，但是在寫法和使用上是有區(qū)別的。下文介紹他們之間的方法及區(qū)別，需要的朋友可以參考一下2022-07-07
ElementUI?el-table?樹形數(shù)據(jù)的懶加載的實現(xiàn)
當(dāng)面對大量數(shù)據(jù)時,一次性加載所有數(shù)據(jù)可能會導(dǎo)致性能問題,我們可以實現(xiàn)樹形數(shù)據(jù)的懶加載,本文主要介紹了ElementUI?el-table?樹形數(shù)據(jù)的懶加載,感興趣的可以了解一下2024-06-06
vue實現(xiàn)原理this.$message實例詳解
這篇文章主要介紹了vue實現(xiàn)原理this.$message實例詳解,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了Vue.js雙向綁定操作技巧(初級入門)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
關(guān)于element中對el-input 自定義驗證規(guī)則
這篇文章主要介紹了關(guān)于element中對el-input 自定義驗證規(guī)則，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本文介紹了Vue.js在SEO優(yōu)化方面的挑戰(zhàn),并提供了一些方法來解決這些問題,包括使用服務(wù)器端渲染、預(yù)渲染和使用VueRouter的History模式來生成靜態(tài)HTML頁面,以及添加meta信息和內(nèi)部鏈接來提高搜索引擎的索引和排名2025-02-02
這篇文章主要介紹了vue實現(xiàn)微信二次分享以及自定義分享的示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue router傳遞參數(shù)并解決刷新頁面參數(shù)丟失問題
這篇文章主要介紹了Vue router傳遞參數(shù)并解決刷新頁面參數(shù)丟失問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12