Vue3的vue-router超詳細(xì)使用示例教程
更新時(shí)間：2022年12月15日 10:56:45 作者：小白阿檳
這篇文章主要介紹了Vue3的vue-router超詳細(xì)使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
搭建vue3環(huán)境
我們使用vite來(lái)搭建vue3環(huán)境(沒(méi)有安裝vite需要去安裝vite)
npm create vite routerStudy
在命令行選擇
cd routerStudy npm i npm run dev
環(huán)境搭建成功??！
vue-router入門(mén)（寶寶模式）
下載vue-router
npm i vue-router@4
新建以下文件
src/components/File1.vue：
<template>
<div>
這是文件一
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>src/components/File2.vue：
<template>
<div>
這是文件二
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>在src下新建router文件夾
在router文件夾下新建router.ts:
import { createRouter,createWebHistory,createWebHashHistory } from 'vue-router'
import File1 from '../components/File1.vue'
import File2 from '../components/File2.vue'
const routes = [
{
path: '/',
component:File1
},
{
path: '/file2',
component:File2
}
]
const router = createRouter({
// history: createWebHistory(),
history:createWebHashHistory(),
routes,
})
export default router;修改src/main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/router'
createApp(App).use(router).mount('#app')修改src/components/HelloWorld.vue:
<script setup lang="ts">
</script>
<template>
<router-view/>
<button><router-link to="/">去文件一</router-link></button>
<button><router-link to="/file2">去文件二</router-link></button>
</template>
<style scoped>
</style>點(diǎn)擊按鈕能夠切換成功則使用成功
vue-router基礎(chǔ)（青年模式）
一。動(dòng)態(tài)路由匹配
1.帶參數(shù)的動(dòng)態(tài)路由匹配
當(dāng)我們需要對(duì)每個(gè)用戶加載同一個(gè)組件，但用戶id不同。我們就需要在vue-router種使用一個(gè)動(dòng)態(tài)字段來(lái)實(shí)現(xiàn)，再通過(guò)$routr.params來(lái)獲取值：
我們用具體實(shí)例來(lái)實(shí)現(xiàn)一下：
（1）修改src/router/router.ts:
import { createRouter,createWebHistory,createWebHashHistory } from 'vue-router'
import File1 from '../components/File1.vue'
import File2 from '../components/File2.vue'
const routes = [
{
path: '/',
component:File1
},
{
path: '/file2/:username/abc/:userid', //注意看這個(gè)
component:File2
}
]
const router = createRouter({
history: createWebHistory(),
// history:createWebHashHistory(),
routes,
})
export default router;（2）修改組件HelloWorld.vue:
(3) 修改組件File2.vue：
<template>
<div>
這是文件二
</div>
</template>
<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'
const instance = getCurrentInstance()
if (instance != null) {
const _this = instance.appContext.config.globalProperties //vue3獲取當(dāng)前this
onMounted(() => {
console.log(_this.$route.params)
})
}
</script>
<style scoped>
</style>（4）點(diǎn)擊去文件二按鈕
（5）查看控制臺(tái)
2.捕獲所有路由或404 Not Found路由
當(dāng)用戶在導(dǎo)航欄亂輸一通后，路由表中沒(méi)有對(duì)應(yīng)的路由，這時(shí)候，就需要將用戶轉(zhuǎn)去404頁(yè)面。那么
我們?cè)撊绾翁幚砟兀?/p>
(1)修改router/router.ts:
import { createRouter,createWebHistory,createWebHashHistory } from 'vue-router'
import File1 from '../components/File1.vue'
import File2 from '../components/File2.vue'
import NotFound from '../components/NotFound.vue'
import UserGeneric from '../components/UserGeneric.vue'
const routes = [
{
path: '/',
component:File1
},
{
path: '/file2/:username/abc/:userid',
component:File2
},
// 將匹配所有內(nèi)容并將其放在 `$route.params.pathMatch` 下
{
path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound
},
// 將匹配以 `/user-` 開(kāi)頭的所有內(nèi)容，并將其放在 `$route.params.afterUser` 下
{
path: '/user-:afterUser(.*)', component: UserGeneric
},
]
const router = createRouter({
history: createWebHistory(),
// history:createWebHashHistory(),
routes,
})
export default router;
(2)新建組件NotFound.vue:
<template>
<div>
糟糕！頁(yè)面沒(méi)有找到。。。嗚嗚嗚
</div>
</template>
<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'
const instance = getCurrentInstance()
if (instance != null) {
const _this = instance.appContext.config.globalProperties //vue3獲取當(dāng)前this
onMounted(() => {
console.log(_this.$route.params)
})
}
</script>
<style scoped>
</style>(3)修改HelloWorld.vue
(4)點(diǎn)擊去404頁(yè)面按鈕（或者在地址欄亂寫(xiě)一通）
(5)出現(xiàn)404頁(yè)面，說(shuō)明運(yùn)行成功?。。?/p>
二。嵌套路由
路由是可以嵌套的。例如：
嵌套的理解挺簡(jiǎn)單的，我就不多叭叭了，直接上代碼，看完就懂了。
（1）新建組件Children1.vue:
<template>
<div>
我是孩子1
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>（2）新建組件Children2.vue:
<template>
<div>
我是孩子2
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
<template>
<div>
我是孩子2
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>(3)修改router/router.ts：
import { createRouter,createWebHistory,createWebHashHistory } from 'vue-router'
import File1 from '../components/File1.vue'
import File2 from '../components/File2.vue'
import NotFound from '../components/NotFound.vue'
import UserGeneric from '../components/UserGeneric.vue'
import Children1 from '../components/Children1.vue'
import Children2 from '../components/Children2.vue'
const routes = [
{
path: '/',
component: File1,
},
{
path: '/file2',
component: File2,
children: [ //使用嵌套路由
{
path: 'children1',
component:Children1
},
{
path: 'children2',
component:Children2
},
]
},
{
path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound
},
{
path: '/user-:afterUser(.*)', component: UserGeneric
},
]
const router = createRouter({
history: createWebHistory(),
// history:createWebHashHistory(),
routes,
})
export default router;
（4)修改組件HelloWorld.vue：
(5)修改組件File2.vue：
<template>
<div>
這是文件二
<div>
我是文件二里的內(nèi)容
<router-view/>
<button><router-link to="/file2/children1">找孩子1</router-link></button>
<button><router-link to="/file2/children2">找孩子2</router-link></button>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
(6)先點(diǎn)去文件二，再點(diǎn)擊找孩子1按鈕，出現(xiàn)即成功！！
三。編程式導(dǎo)航
除了使用/< router-link/> 創(chuàng)建 a 標(biāo)簽來(lái)定義導(dǎo)航鏈接，我們還可以借助 router 的實(shí)例方法，通過(guò)編寫(xiě)代碼來(lái)實(shí)現(xiàn)。
1.router.push()方法的使用
(1)修改組件NotFound.vue:
<template>
<div>
糟糕！頁(yè)面沒(méi)有找到。。。嗚嗚嗚
</div>
</template>
<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'
const instance = getCurrentInstance()
if (instance != null) {
const _this = instance.appContext.config.globalProperties //vue3獲取當(dāng)前this
// 1.字符串路徑
_this.$router.push('/file2/children2')
// 2.帶有路徑的對(duì)象
// _this.$router.push({path:'/file2/children2'})
// 3.命名的路由，并加上參數(shù)，讓路由建立 url
// _this.$router.push({name:'file2',params:{username:'children2'}})
// 4.帶查詢參數(shù)，結(jié)果是 /register?plan=private
// _this.$router.push({ path: '/file2/children2', query: {userid:'123'} })
onMounted(() => {
console.log(_this.$route.params)
})
}
</script>
<style scoped>
</style>
(2)再點(diǎn)“去404頁(yè)面”,發(fā)現(xiàn)沒(méi)有去404頁(yè)面了，說(shuō)明編程式導(dǎo)航成功??！
2.router.replace()方法的使用
它的作用類似于 router.push，唯一不同的是，它在導(dǎo)航時(shí)不會(huì)向 history 添加新記錄，正如它的名字所暗示的那樣——它取代了當(dāng)前的條目。
修改組件NotFound.vue：
<template>
<div>
糟糕！頁(yè)面沒(méi)有找到。。。嗚嗚嗚
</div>
</template>
<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'
const instance = getCurrentInstance()
if (instance != null) {
const _this = instance.appContext.config.globalProperties //vue3獲取當(dāng)前this
// 一。router.push的使用：
// 1.字符串路徑
// _this.$router.push('/file2/children2')
// 2.帶有路徑的對(duì)象
// _this.$router.push({path:'/file2/children2'})
// 3.命名的路由，并加上參數(shù)，讓路由建立 url
// _this.$router.push({name:'file2',params:{username:'children2'}})
// 4.帶查詢參數(shù)，結(jié)果是 /register?plan=private
// _this.$router.push({ path: '/file2/children2', query: {userid:'123'} })
// 二。router.replace的使用：
_this.$router.replace('/file2/children1')
onMounted(() => {
console.log(_this.$route.params)
})
}
</script>
<style scoped>
</style>
3.router.go()方法的使用
修改組件NotFound.vue：
<template>
<div>
糟糕！頁(yè)面沒(méi)有找到。。。嗚嗚嗚
</div>
</template>
<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'
const instance = getCurrentInstance()
if (instance != null) {
const _this = instance.appContext.config.globalProperties //vue3獲取當(dāng)前this
// 一。router.push的使用：
// 1.字符串路徑
// _this.$router.push('/file2/children2')
// 2.帶有路徑的對(duì)象
// _this.$router.push({path:'/file2/children2'})
// 3.命名的路由，并加上參數(shù)，讓路由建立 url
// _this.$router.push({name:'file2',params:{username:'children2'}})
// 4.帶查詢參數(shù)，結(jié)果是 /register?plan=private
// _this.$router.push({ path: '/file2/children2', query: {userid:'123'} })
// 二。router.replace的使用：
// _this.$router.replace('/file2/children1')
// 三。router.go的使用：
_this.$router.go(-1) //相當(dāng)于點(diǎn)擊回退一次
onMounted(() => {
console.log(_this.$route.params)
})
}
</script>
<style scoped>
</style>
到此這篇關(guān)于Vue3的vue-router超詳細(xì)使用的文章就介紹到這了,更多相關(guān)Vue3的vue-router使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之導(dǎo)航鉤子
本篇文章主要介紹了vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之導(dǎo)航鉤子，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
mpvue實(shí)現(xiàn)左側(cè)導(dǎo)航與右側(cè)內(nèi)容的聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了mpvue實(shí)現(xiàn)左側(cè)導(dǎo)航與右側(cè)內(nèi)容的聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
使用vant-picker實(shí)現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標(biāo)
這篇文章主要介紹了使用vant-picker實(shí)現(xiàn)自定義內(nèi)容，根據(jù)內(nèi)容添加圖標(biāo)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue實(shí)現(xiàn)微信分享朋友圈,發(fā)送朋友的示例講解
下面小編就為大家分享一篇vue實(shí)現(xiàn)微信分享朋友圈,發(fā)送朋友的示例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue3通過(guò)父子傳值實(shí)現(xiàn)彈框功能
在Vue3中,我們可以通過(guò)?provide?和?inject?來(lái)實(shí)現(xiàn)父子組件之間的數(shù)據(jù)傳遞,這也適用于實(shí)現(xiàn)彈框功能,下面我們就來(lái)學(xué)習(xí)一下vue3實(shí)現(xiàn)彈框功能的具體方法吧2023-12-12
本文主要介紹了Vue3.2+Ts組件之間通信的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue學(xué)習(xí)之mintui picker選擇器實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)示例
本篇文章主要介紹了vue學(xué)習(xí)之mintui picker選擇器實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10
這篇文章主要給大家介紹了關(guān)于vue中自定義指令directive的相關(guān)資料,自定義指令解決的問(wèn)題或者說(shuō)使用場(chǎng)景是對(duì)普通 DOM 元素進(jìn)行底層操作,所以我們不能盲目的胡亂的使用自定義指令,需要的朋友可以參考下2021-09-09
Vue.js每天必學(xué)之方法與事件處理器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
Vue+Element實(shí)現(xiàn)表格單元格編輯
這篇文章主要為大家詳細(xì)介紹了Vue+Element實(shí)現(xiàn)表格單元格編輯，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04