路由vue-route的使用示例教程
一、項(xiàng)目初始化
二、路由配置規(guī)則
path：配置路由訪問的路徑
name：給路由起名字（命名路由）
component：訪問路由時(shí)，渲染的組件
{
path: '/',
name: 'index',
component: () => import('../views/IndexView.vue')
},App.vue
vue-route標(biāo)簽作用：路由匹配到的組件將渲染到這里
<template> <router-view/> </template>
router-link標(biāo)簽作用：路由導(dǎo)航（路由跳轉(zhuǎn)的鏈接）
三、聲明式導(dǎo)航和編程式導(dǎo)航
聲明式導(dǎo)航
<router-link to="/login"></router-link>
<router-link :to="{path:'/login'}"></router-link>編程式導(dǎo)航
推薦使用路由的名字進(jìn)行跳轉(zhuǎn)，不推薦直接寫路徑
<button @click="$router.push('/login')">登錄按鈕</button>
<button @click="$router.push({path:'/login'})">登錄按鈕</button>
<button @click="$router.push({name:'login'})">登錄按鈕</button>$router:路由對(duì)象
在app.use(router)在注冊(cè)路由時(shí)，會(huì)給app設(shè)置全局屬性$router
<button @click="loginBtn">登錄按鈕</button>
<script>
export default{
methods:{
loginBtn(){
this.$router.push('/login')
}
}
}
</script>通過調(diào)用app.use(router),我們可以在任意組件中以this.$router的形式訪問它，并且以this.$router的形式訪問當(dāng)前路由
四、路由重定向
當(dāng)訪問http://localhost:8080/#/project這個(gè)路由
會(huì)跳轉(zhuǎn)到http://localhost:8080/#/login這個(gè)路由
{
path: '/project',
name:'project',
// 路由重定向配置
redirect:{
name:'login',
}
},五、嵌套路由
index.js：路由配置
{
path: '/home',
name: 'home',
component: () => import('../views/HomeView.vue'),
// 配置home下面的且套路由
children:[
{
path:'/home/project',
name:'project',
component:()=>import('../views/ProjectView.vue')
},
{
path:'/home/interface',
name:'interface',
component:()=>import('../views/InterfaceView.vue')
},
{
path:'/home/report',
name:'report',
component:()=>import('../views/ReportView.vue')
}]
},
HomeView.vue組件
<template>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1" @click="$router.push({name:'project'})">項(xiàng)目信息</el-menu-item>
<el-menu-item index="2" @click="$router.push({name:'interface'})">接口信息</el-menu-item>
<el-menu-item index="3" @click="$router.push({name:'report'})">測(cè)試報(bào)告</el-menu-item>
</el-menu>
<!-- home中嵌套路由的渲染位置（路由出口） -->
<router-view/>
</template>
<script>
</script>
<style>
</style>特別注意
把不變的內(nèi)容寫到父路由中，并且父路由中預(yù)留路由展示位。將變化的內(nèi)容寫到子路由中
總結(jié)
六、路由參數(shù)動(dòng)態(tài)匹配
{
path:'/user/:id',
name:'user',
component: () => import('../views/UserView.vue')
},訪問路由：http://localhost:8080/#/user/666
UserView.vue組件
獲取路由的路徑參數(shù)
<template>
<h1>User頁面</h1>
<!-- 獲取路由的路徑參數(shù) -->
<h3>路由中匹配的id：{{$route.params.id}}</h3>
</template>
<script>
</script>
<style>
</style>獲取路由的查詢參數(shù)
http://localhost:8080/#/user/666?name=kobe
<template>
<h1>User頁面</h1>
<!-- 獲取路由的查詢參數(shù) -->
<h4>查詢參數(shù)name：{{$route.query.name}}</h4>
</template>
<script>
</script>
<style>
</style>特別注意
$router和$route的區(qū)別：$router：路由管理器對(duì)象，一般用于路由跳轉(zhuǎn)$route：表示當(dāng)前訪問的路由，用來獲取當(dāng)前路由參數(shù)的一些信息
七、導(dǎo)航跳轉(zhuǎn)時(shí)傳遞路由參數(shù)
<router-link :to="{name:'user',params:{id:888},query:{name:111}}">user頁面</router-link>
<button @click="$router.push({name:'user',params:{id:666},query:{name:222}})">user按鈕</button> 八、路由導(dǎo)航守衛(wèi)
設(shè)置路由導(dǎo)航守衛(wèi)（控制前端的路由訪問權(quán)限）
router.beforeEach(async (to, from) => {
/*
1、判斷用戶是否登錄
1.1從本地獲取用戶身份信息（存儲(chǔ)在cookie或者localstroge中的token，session）
window.cookieStore.get('token')
window.localStorage.getItem('token')
window.sessionStore.getItem('token')
1.2驗(yàn)證token是否有效
*/
// const isAuthenticated=true
// if (
// // 檢查用戶是否已登錄
// !isAuthenticated &&
// // ?? 避免無限重定向
// to.name !== 'Login'
// ) {
// // 將用戶重定向到登錄頁面
// return { name: 'Login' }
// }
// })
})
到此這篇關(guān)于路由vue-route的使用的文章就介紹到這了,更多相關(guān)路由vue-route使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue3使用vue-router及路由權(quán)限攔截方式
- Vue3使用vue-router如何實(shí)現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取
- vue-router重定向和路由別名的使用講解
- Vue-router的使用和出現(xiàn)空白頁,路由對(duì)象屬性詳解
- 使用vue-router為每個(gè)路由配置各自的title
- 使用vue-router beforEach實(shí)現(xiàn)判斷用戶登錄跳轉(zhuǎn)路由篩選功能
- 使用vue-route 的 beforeEach 實(shí)現(xiàn)導(dǎo)航守衛(wèi)(路由跳轉(zhuǎn)前驗(yàn)證登錄)功能
- vue-router：嵌套路由的使用方法
- VueJs路由跳轉(zhuǎn)——vue-router的使用詳解
相關(guān)文章
本篇文章主要介紹了如何去除vue項(xiàng)目中的#及其ie9兼容性，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue實(shí)現(xiàn)配置全局訪問路徑頭(axios)
今天小編就為大家分享一篇vue實(shí)現(xiàn)配置全局訪問路徑頭(axios)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在vue中實(shí)現(xiàn)表單驗(yàn)證碼與滑動(dòng)驗(yàn)證功能的代碼詳解
在Web應(yīng)用程序中，表單驗(yàn)證碼和滑動(dòng)驗(yàn)證是常見的安全機(jī)制，用于防止惡意攻擊和機(jī)器人攻擊，本文將介紹如何使用Vue和vue-verify-code庫來實(shí)現(xiàn)表單驗(yàn)證碼和滑動(dòng)驗(yàn)證功能,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue 生命周期的過程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
nextTick是Vue提供的一個(gè)全局API，由于Vue的異步更新策略導(dǎo)致我們對(duì)數(shù)據(jù)的修改不會(huì)立刻體現(xiàn)，在DOM變化上，此時(shí)如果想要立即獲取更新后的DOM狀態(tài)，就需要使用這個(gè)方法，這篇文章主要介紹了解析VUE中nextTick,需要的朋友可以參考下2022-11-11
Vue實(shí)現(xiàn)PC端分辨率自適應(yīng)的示例代碼
本文主要介紹了Vue實(shí)現(xiàn)PC端分辨率自適應(yīng)的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
詳解基于Vue的支持?jǐn)?shù)據(jù)雙向綁定的select組件
這篇文章主要介紹了詳解基于Vue的支持?jǐn)?shù)據(jù)雙向綁定的select組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue+Element的后臺(tái)管理框架的整合實(shí)踐
本文主要介紹了Vue+Element的后臺(tái)管理框架，在框架上，領(lǐng)導(dǎo)要用AdminLTE這套模板，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
教你如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境
這篇文章主要介紹了如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境,文中給大家提到了如何讓 Vite 加載 Electron 的內(nèi)置模塊和 Node.js 的內(nèi)置模塊，需要的朋友可以參考下2022-11-11
vue結(jié)合el-dialog封裝自己的confirm二次確認(rèn)彈窗方式
這篇文章主要介紹了vue結(jié)合el-dialog封裝自己的confirm二次確認(rèn)彈窗方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-08-08