Vue3的vue-router超詳細(xì)使用示例教程
搭建vue3環(huán)境
我們使用vite來搭建vue3環(huán)境(沒有安裝vite需要去安裝vite)
npm create vite routerStudy
在命令行選擇
cd routerStudy npm i npm run dev
環(huán)境搭建成功?。?/strong>
vue-router入門(寶寶模式)
下載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ǔ)(青年模式)
一。動態(tài)路由匹配
1.帶參數(shù)的動態(tài)路由匹配
當(dāng)我們需要對每個用戶加載同一個組件,但用戶id不同。我們就需要在vue-router種使用一個動態(tài)字段來實(shí)現(xiàn),再通過$routr.params來獲取值:
我們用具體實(shí)例來實(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', //注意看這個 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)查看控制臺
2.捕獲所有路由或404 Not Found路由
當(dāng)用戶在導(dǎo)航欄亂輸一通后,路由表中沒有對應(yīng)的路由,這時候,就需要將用戶轉(zhuǎn)去404頁面。那么
我們該如何處理呢?
(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-` 開頭的所有內(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> 糟糕!頁面沒有找到。。。嗚嗚嗚 </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頁面按鈕(或者在地址欄亂寫一通)
(5)出現(xiàn)404頁面,說明運(yù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)簽來定義導(dǎo)航鏈接,我們還可以借助 router 的實(shí)例方法,通過編寫代碼來實(shí)現(xiàn)。
1.router.push()方法的使用
(1)修改組件NotFound.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 // 1.字符串路徑 _this.$router.push('/file2/children2') // 2.帶有路徑的對象 // _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頁面”,發(fā)現(xiàn)沒有去404頁面了,說明編程式導(dǎo)航成功??!
2.router.replace()方法的使用
它的作用類似于 router.push,唯一不同的是,它在導(dǎo)航時不會向 history 添加新記錄,正如它的名字所暗示的那樣——它取代了當(dāng)前的條目。
修改組件NotFound.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 // 一。router.push的使用: // 1.字符串路徑 // _this.$router.push('/file2/children2') // 2.帶有路徑的對象 // _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> 糟糕!頁面沒有找到。。。嗚嗚嗚 </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.帶有路徑的對象 // _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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯詳解
el-tree-select組件是el-tree和el-select的結(jié)合體,他們的原始屬性未被更改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯的相關(guān)資料,需要的朋友可以參考下2022-11-11vue3二次封裝element-ui中的table組件的過程詳解
這篇文章主要給大家介紹了vue3二次封裝element-ui中的table組件的過程,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友跟著小編一起來學(xué)習(xí)吧2024-01-01vite+vue3+element-plus項(xiàng)目搭建的方法步驟
因?yàn)関ue3出了一段時間了,element也出了基于vue3.x版本的element-plus,vite打包聽說很快,嘗試一下,感興趣的可以了解一下2021-06-06基于Vue實(shí)現(xiàn)一個textarea幽靈建議功能
不知道你有沒有發(fā)現(xiàn)Bing AI聊天有個輸入提示功能,在用戶輸入部分內(nèi)容時后面會給出灰色提示文案,用戶只要按下tab鍵就可以快速添加提示的后續(xù)內(nèi)容,我將這個功能稱為幽靈建議,接下來我將用Vue框架來實(shí)現(xiàn)這個功能,需要的朋友可以參考下2023-09-09Flutter部件內(nèi)部狀態(tài)管理小結(jié)之實(shí)現(xiàn)Vue的v-model功能
本文是 Flutter 部件內(nèi)部狀態(tài)管理的小結(jié),從部件的基礎(chǔ)開始,到部件的狀態(tài)管理,并且在過程中實(shí)現(xiàn)一個類似 Vue 的 v-model 的功能,感興趣的朋友跟隨小編一起看看吧2019-06-06vue-cli+webpack記事本項(xiàng)目創(chuàng)建
這篇文章主要為大家詳細(xì)介紹了vue-cli+webpack創(chuàng)建記事本項(xiàng)目,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04使用this.$router.go(-1)遇到的一些問題及解決
這篇文章主要介紹了使用this.$router.go(-1)遇到的一些問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12