Vue路由vue-router詳細(xì)講解指南
中文文檔：https://router.vuejs.org/zh/
Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。路由實(shí)際上就是可以理解為指向，就是我在頁面上點(diǎn)擊一個(gè)按鈕需要跳轉(zhuǎn)到對(duì)應(yīng)的頁面，這就是路由跳轉(zhuǎn)；
首先我們來學(xué)習(xí)三個(gè)單詞（route，routes，router）：
- route：首先它是個(gè)單數(shù)，譯為路由，即我們可以理解為單個(gè)路由或者某一個(gè)路由；
- routes：它是個(gè)復(fù)數(shù)，表示多個(gè)的集合才能為復(fù)數(shù)；即我們可以理解為多個(gè)路由的集合，JS中表示多種不同狀態(tài)的集合的形式只有數(shù)組和對(duì)象兩種，事實(shí)上官方定義routes是一個(gè)數(shù)組；所以我們記住了，routes表示多個(gè)數(shù)組的集合；
- router：譯為路由器，上面都是路由，這個(gè)是路由器，我們可以理解為一個(gè)容器包含上述兩個(gè)或者說它是一個(gè)管理者，負(fù)責(zé)管理上述兩個(gè)；舉個(gè)常見的場(chǎng)景的例子：當(dāng)用戶在頁面上點(diǎn)擊按鈕的時(shí)候，這個(gè)時(shí)候router就會(huì)去routes中去查找route，就是說路由器會(huì)去路由集合中找對(duì)應(yīng)的路由；
我們結(jié)合一個(gè)小demo來看（文章有點(diǎn)長(zhǎng)，耐心慢慢看，學(xué)得慢才能進(jìn)步的快，當(dāng)然可以跟著一起敲）：
首先需要安裝vue-cli來構(gòu)建一個(gè)vue的開發(fā)環(huán)境（怎么安裝這里不講，自己百度去，如果這種問題自己都解決不了的話，后面的知識(shí)可能對(duì)你來說收益不大）
安裝完vue-cli之后，我們的項(xiàng)目目錄結(jié)構(gòu)如下：
然后我們?cè)诿钚兄休斎雗pm install vue-router -g來安裝vue-router，安裝完之后我們可以打開package.json文件，在package.json文件中可以看到vue-router的版本號(hào)；
到這一步我們的準(zhǔn)備工作就完成了，要進(jìn)行寫demo了；
我們?cè)趕rc目錄下新建三個(gè)文件，分別為page1.vue和page2.vue以及router.js：
page1.vue：
<template>
<div>
<h1>page1</h1>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: "我是page1組件"
}
}
}
</script>
page2.vue：
<template>
<div>
<h1>page2</h1>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: "我是page2組件"
}
}
}
</script>
router.js
//引入vue
import Vue from 'vue';
//引入vue-router
import VueRouter from 'vue-router';
//第三方庫需要use一下才能用
Vue.use(VueRouter)
//引用page1頁面
import page1 from './page1.vue';
//引用page2頁面
import page2 from './page2.vue';
//定義routes路由的集合，數(shù)組類型
const routes=[
//單個(gè)路由均為對(duì)象類型，path代表的是路徑，component代表組件
{path:'/page1',component:page1},
{path:"/page2",component:page2}
]
//實(shí)例化VueRouter并將routes添加進(jìn)去
const router=new VueRouter({
//ES6簡(jiǎn)寫，等于routes：routes
routes
});
//拋出這個(gè)這個(gè)實(shí)例對(duì)象方便外部讀取以及訪問
export default router
這里我們?cè)傩薷囊幌耺ain.js
import Vue from 'vue'
import App from './App'
//引用router.js
import router from './router.js'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
//一定要注入到vue的實(shí)例對(duì)象上
router,
components: { App },
template: '<App/>'
})
修改App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
//router-link定義頁面中點(diǎn)擊觸發(fā)部分
<router-link to="/page1">Page1</router-link>
<router-link to="/page2">Page2</router-link>
</div>
//router-view定義頁面中顯示部分
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
就這樣，我們的頁面就可以進(jìn)行路由跳轉(zhuǎn)和切換了，路由的基本使用就完成了；但是有個(gè)問題就是我們第一次進(jìn)去是看不到路由頁面的，這是因?yàn)槲覀儧]有設(shè)置默認(rèn)值，我們首次進(jìn)入的時(shí)候路徑是為空的，那么我們可以這么解決：
router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import page1 from './page1.vue';
import page2 from './page2.vue';
import user from './user.vue'
const routes=[
{path:'/page1',component:page1},
{path:"/page2",component:page2},
//可以配置重定向
{path:'',redirect:"page1"}
//或者重新寫個(gè)路徑為空的路由
{path:"",component:page1}
]
const router=new VueRouter({
routes
});
export default router
上面的兩種解決方案都是可以解決的，配置重定向的意思就是當(dāng)匹配到路徑為空的時(shí)候，就會(huì)重定向到page1，執(zhí)行page1的路由；或者我們也可以重新配置個(gè)路由，路徑為空的時(shí)候router-view展示page1的頁面；
用重定向和單獨(dú)配置路由的區(qū)別：
重定向?qū)嶋H上是當(dāng)匹配到路徑符合條件的時(shí)候去執(zhí)行對(duì)應(yīng)的路由，當(dāng)然這個(gè)時(shí)候的url上面的地址顯示的是對(duì)應(yīng)的路由，頁面也是對(duì)應(yīng)的路由頁面；
重新配置路由是當(dāng)匹配到路徑符合條件的時(shí)候，router-view頁面展示部分負(fù)責(zé)拿符合條件路由的頁面來展示，實(shí)際上url是沒有發(fā)生變化的；
那么還有些復(fù)雜情況，是基本路由實(shí)現(xiàn)不了的；我們來接著往下看
動(dòng)態(tài)路由匹配：
其實(shí)我們的生活中有很多這樣的例子，不知道大家留意沒有？比如一個(gè)網(wǎng)站或者后臺(tái)管理系統(tǒng)中，在我們登錄之后，是不是通常會(huì)有一個(gè)歡迎回來，XXX之類的提示語，這個(gè)我們就可以通過動(dòng)態(tài)路由來實(shí)現(xiàn)這個(gè)效果；
首先在src目錄下新建一個(gè)user.vue文件：
<template>
<div>
<h1>user</h1>
//這里可以通過$route.params.name來獲取路由的參數(shù)
<p>歡迎回來,{{$route.params.name}}</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: "我是page1組件"
}
}
}
</script>
然后我們修改App.vue文件的代碼：
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<router-link to="/page1">Page1</router-link>
<router-link to="/page2">Page2</router-link>
</div>
//添加兩個(gè)router-link標(biāo)簽
<div>
<router-link to="/user/xianyu">動(dòng)態(tài)路由咸魚</router-link>
<router-link to="/user/mengxiang">動(dòng)態(tài)路由夢(mèng)想</router-link>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
修改我們的router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import page1 from './page1.vue';
import page2 from './page2.vue';
import user from './user.vue'
const routes=[
{path:'/page1',component:page1},
{path:"/page2",component:page2},
// {path:'',redirect:"page1"}
{path:"",component:page1},
//使用冒號(hào)標(biāo)記，當(dāng)匹配到的時(shí)候，參數(shù)值會(huì)被設(shè)置到this.$route.params中
{path:"/user/:name",component:user}
]
const router=new VueRouter({
routes
});
export default router
配置好了，不出意外是能正常運(yùn)行的，我們來看一下效果：
動(dòng)態(tài)路由匹配給我們提供了方便，使得我們通過配置一個(gè)路由來實(shí)現(xiàn)頁面局部修改的效果，給用戶造成一種多個(gè)頁面的感覺，是不是很酷?。?！
酷的同時(shí)也會(huì)給我們帶來一些問題，因?yàn)槭褂寐酚蓞?shù)時(shí)，從/user/xianyu導(dǎo)航到/user/mengxiang，原來的組件實(shí)例會(huì)被復(fù)用，兩個(gè)路由都渲染同個(gè)組件，比起銷毀再創(chuàng)建，顯示復(fù)用顯得效率更高，帶來的的只管問題就是生命周期鉤子函數(shù)不會(huì)再被調(diào)用，也就是不會(huì)再被觸發(fā)；但是辦法總比問題多，我們可以通過監(jiān)聽$route對(duì)象來實(shí)現(xiàn);
修改user.vue的代碼
<template>
<div>
<h1>user</h1>
<p>歡迎回來,{{msg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
// msg: "我是page1組件"
msg:""
}
},
watch:{
//to表示即將要進(jìn)入的那個(gè)組件，from表示從哪個(gè)組件過來的
$route(to,from){
this.msg=to.params.name;
console.log(111);
}
}
}
</script>
效果圖如下：
我們可以很明顯的看到我們監(jiān)聽的$route對(duì)象被觸發(fā)了，控制臺(tái)也輸出了；
下面我們來一起看一下嵌套路由：
嵌套路由：
很多時(shí)候我們的頁面結(jié)構(gòu)決定了我們可能需要嵌套路由，比如當(dāng)我們進(jìn)入主頁之后有分類，然后當(dāng)選擇其中一個(gè)分類之后進(jìn)入對(duì)應(yīng)的詳情，這個(gè)時(shí)候我們就可以用到嵌套路由；官方文檔中給我們提供了一個(gè)children屬性，這個(gè)屬性是一個(gè)數(shù)組類型，里面實(shí)際放著一組路由；這個(gè)時(shí)候父子關(guān)系結(jié)構(gòu)就出來了，所以children屬性里面的是路由相對(duì)來說是children屬性外部路由的子路由；
好記性不如爛代碼，讓我們通過代碼來看一看：
首先在我們的src目錄下新建兩個(gè)vue文件，分別是phone.vue和computer.vue
phone.vue
<template>
<div>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: "嵌套手機(jī)組件"
}
}
}
</script>
computer.vue
<template>
<div>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: "嵌套電腦組件"
}
}
}
</script>
然后我們?cè)傩薷奈覀兊腁pp.vue文件：
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<router-link to="/page1">Page1</router-link>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
通過上面的App.vue文件我們可以看到，我們此時(shí)頁面只有一個(gè)page1的標(biāo)簽了；
我們?cè)賮硇薷膔outer.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import page1 from './page1.vue';
import page2 from './page2.vue';
import user from './user.vue';
import phone from './phone.vue';
import computer from './computer.vue'
const routes=[
{
path:'/page1',
component:page1,
children: [
{
path: "phone",
component: phone
},
{
path: "computer",
component: computer
},
]
},
// {path:"/page2",component:page2},
// // {path:'',redirect:"page1"}
// {path:"",component:page1},
// {path:"/user/:name",component:user}
]
const router=new VueRouter({
routes
});
export default router
為了大家看的直觀點(diǎn)，其他路由全部注釋了，頁面只剩下/page1這一個(gè)路由了；
上面說到了，children屬性其實(shí)就是一個(gè)子路由集合，數(shù)組結(jié)構(gòu)里面放著子路由；
效果圖如下：
路由導(dǎo)航兩種方式：
標(biāo)簽導(dǎo)航：標(biāo)簽導(dǎo)航<router-link><router-link>是通過轉(zhuǎn)義為<a></a>標(biāo)簽進(jìn)行跳轉(zhuǎn)，其中router-link標(biāo)簽中的to屬性會(huì)被轉(zhuǎn)義為a標(biāo)簽中的href屬性；
//跳轉(zhuǎn)到名為user路由，并傳遞參數(shù)userId
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
編程式導(dǎo)航：我們可以通過this.$router.push()這個(gè)方法來實(shí)現(xiàn)編程式導(dǎo)航，當(dāng)然也可以實(shí)現(xiàn)參數(shù)傳遞，這種編程式導(dǎo)航一般是用于按鈕點(diǎn)擊之后跳轉(zhuǎn)
router.push({ name: 'user', params: { userId: 123 }})
這兩者都會(huì)把路由導(dǎo)航到user/123路徑
命名路由：
有的時(shí)候，通過一個(gè)名稱來標(biāo)識(shí)一個(gè)路由顯得更方便一些，所以官方為了方便我們偷懶，又給我們?cè)诼酚芍刑砑恿艘粋€(gè)name屬性，命名這個(gè)屬性之后我們?cè)L問這個(gè)屬性就等于直接訪問到路由；
普通路由：
router.push({ path: '/user/:userId', params: { userId: 123 }})
命名路由：
router.push({ name: 'user', params: { userId: 123 }})
其實(shí)兩者并沒有什么區(qū)別，只是提供了兩種方式來訪問路由，可以通過路徑來匹配也可以通過別名來匹配；
以上就是Vue路由vue-router詳細(xì)講解指南的詳細(xì)內(nèi)容，更多關(guān)于Vue路由講解的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue中使用Echarts?map圖實(shí)現(xiàn)下鉆至縣級(jí)的思路詳解
這篇文章主要介紹了vue中使用Echarts?map圖實(shí)現(xiàn)下鉆至縣級(jí),需要注意的是，因?yàn)槲沂侵苯訌?vue-cli2?直接跳到?vue-cli4?，還奇怪怎么讀取不到JSON，查找后才知道?vue-cli3?往后的項(xiàng)目基礎(chǔ)架構(gòu)對(duì)比舊版本有些區(qū)別，感興趣的朋友跟隨小編一起看看吧2022-01-01
Vue?和?Django?實(shí)現(xiàn)?Token?身份驗(yàn)證的流程
這篇文章主要介紹了Vue?和?Django?實(shí)現(xiàn)?Token?身份驗(yàn)證?,Vue.js?和?Django?編寫的前后端項(xiàng)目中，實(shí)現(xiàn)了基于?Token?的身份驗(yàn)證機(jī)制，其他前后端框架的?Token?實(shí)現(xiàn)原理與本文一致，需要的朋友可以參考下2022-08-08
vue+element實(shí)現(xiàn)動(dòng)態(tài)換膚的示例代碼
本文主要介紹了vue+element實(shí)現(xiàn)動(dòng)態(tài)換膚的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了Vue3中useLocalStorage用法的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解一下2023-10-10
Vue+Vant實(shí)現(xiàn)7天日歷展示并在切換日期時(shí)實(shí)時(shí)變換功能
本文介紹了如何利用Vue和Vant框架結(jié)合moment.js插件來實(shí)現(xiàn)一個(gè)7天日歷展示功能,在這個(gè)功能中,用戶可以在切換日期時(shí)看到界面的實(shí)時(shí)變化,此外,文章還提供了代碼實(shí)現(xiàn)和效果測(cè)試的詳細(xì)步驟,幫助開發(fā)者能夠順利完成類似的項(xiàng)目開發(fā)2024-10-10
如何理解Vue簡(jiǎn)單狀態(tài)管理之store模式
狀態(tài)管理也就是數(shù)據(jù)狀態(tài)管理，vue應(yīng)用程序的各組件之間經(jīng)常需要進(jìn)行通信，除了v-on、EventBus等通信方式外，可以采用數(shù)據(jù)共享的方式進(jìn)行通信。這種簡(jiǎn)單的數(shù)據(jù)共享模式就是store模式。2021-05-05
這篇文章主要為大家介紹了解決threeJS加載obj?gltf模型后顏色太暗的方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
解決vue處理axios post請(qǐng)求傳參的問題
下面小編就為大家分享一篇解決vue處理axios post請(qǐng)求傳參的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue項(xiàng)目中按鈕防抖處理實(shí)現(xiàn)過程
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中按鈕防抖處理實(shí)現(xiàn)的相關(guān)資料,在項(xiàng)目開發(fā)中相必大家時(shí)常會(huì)遇到按鈕重復(fù)點(diǎn)擊后引起事件重復(fù)提交的問題,需要的朋友可以參考下2023-08-08
Vue如何實(shí)現(xiàn)文件預(yù)覽和下載功能的前端上傳組件
在Vue.js項(xiàng)目中,使用ElementUI的el-upload組件可以輕松實(shí)現(xiàn)文件上傳功能,通過配置組件參數(shù)和實(shí)現(xiàn)相應(yīng)的方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09