Vue路由（vue-router）詳細講解指南
中文文檔：https://router.vuejs.org/zh/vue
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。路由實際上就是能夠理解爲指向，就是我在頁面上點擊一個按鈕須要跳轉到對應的頁面，這就是路由跳轉；
web
首先咱們來學習三個單詞（route，routes，router）：vue-router
route：首先它是個單數，譯爲路由，即咱們能夠理解爲單個路由或者某一個路由；vue-cli
routes：它是個複數，表示多個的集合才能爲複數；即咱們能夠理解爲多個路由的集合，JS中表示多種不一樣狀態的集合的形式只有數組和對象兩種，事實上官方定義routes是一個數組；因此咱們記住了，routes表示多個數組的集合；npm
router：譯爲路由器，上面都是路由，這個是路由器，咱們能夠理解爲一個容器包含上述兩個或者說它是一個管理者，負責管理上述兩個；舉個常見的場景的例子：當用戶在頁面上點擊按鈕的時候，這個時候router就會去routes中去查找route，就是說路由器會去路由集合中找對應的路由；編程
咱們結合一個小demo來看（文章有點長，耐心慢慢看，學得慢才能進步的快，固然能夠跟着一塊兒敲）：json
首先須要安裝vue-cli來構建一個vue的開發環境（怎麼安裝這裏不講，本身百度去，若是這種問題本身都解決不了的話，後面的知識可能對你來講收益不大）數組
安裝完vue-cli以後，咱們的項目目錄結構以下：app
而後咱們在命令行中輸入npm install vue-router -g來安裝vue-router，安裝完以後咱們能夠打開package.json文件，在package.json文件中能夠看到vue-router的版本號；
函數
到這一步咱們的準備工做就完成了，要進行寫demo了；
咱們在src目錄下新建三個文件，分別爲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路由的集合，數組類型 const routes=[ //單個路由均爲對象類型，path表明的是路徑，component表明組件 {path:'/page1',component:page1}, {path:"/page2",component:page2} ] //實例化VueRouter並將routes添加進去 const router=new VueRouter({ //ES6簡寫，等於routes：routes routes }); //拋出這個這個實例對象方便外部讀取以及訪問 export default router
這裏咱們再修改一下main.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的實例對象上 router, components: { App }, template: '<App/>' })
修改App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
//router-link定義頁面中點擊觸發部分
<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>
就這樣，咱們的頁面就能夠進行路由跳轉和切換了，路由的基本使用就完成了；可是有個問題就是咱們第一次進去是看不到路由頁面的，這是由於咱們沒有設置默認值，咱們首次進入的時候路徑是爲空的，那麼咱們能夠這麼解決：
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} ] const router=new VueRouter({ routes }); export default router
上面的兩種解決方案都是能夠解決的，配置重定向的意思就是當匹配到路徑爲空的時候，就會重定向到page1，執行page1的路由；或者咱們也能夠從新配置個路由，路徑爲空的時候router-view展現page1的頁面；
用重定向和單獨配置路由的區別：
重定向其實是當匹配到路徑符合條件的時候去執行對應的路由，固然這個時候的url上面的地址顯示的是對應的路由，頁面也是對應的路由頁面；
從新配置路由是當匹配到路徑符合條件的時候，router-view頁面展現部分負責拿符合條件路由的頁面來展現，實際上url是沒有發生變化的；
那麼還有些複雜狀況，是基本路由實現不了的；咱們來接着往下看
動態路由匹配：
其實咱們的生活中有不少這樣的例子，不知道你們留意沒有？好比一個網站或者後臺管理系統中，在咱們登陸以後，是否是一般會有一個歡迎回來，XXX之類的提示語，這個咱們就能夠經過動態路由來實現這個效果；
首先在src目錄下新建一個user.vue文件：
<template>
<div>
<h1>user</h1>
//這裏能夠經過$route.params.name來獲取路由的參數
<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>
//添加兩個router-link標籤
<div>
<router-link to="/user/xianyu">動態路由鹹魚</router-link>
<router-link to="/user/mengxiang">動態路由夢想</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}, //使用冒號標記，當匹配到的時候，參數值會被設置到this.$route.params中 {path:"/user/:name",component:user} ] const router=new VueRouter({ routes }); export default router
配置好了，不出意外是能正常運行的，咱們來看一下效果：
動態路由匹配給咱們提供了方便，使得咱們經過配置一個路由來實現頁面局部修改的效果，給用戶形成一種多個頁面的感受，是否是很酷！！！
酷的同時也會給咱們帶來一些問題，由於使用路由參數時，從/user/xianyu導航到/user/mengxiang，原來的組件實例會被複用，兩個路由都渲染同個組件，比起銷燬再建立，顯示覆用顯得效率更高，帶來的的只管問題就是生命週期鉤子函數不會再被調用，也就是不會再被觸發；可是辦法總比問題多，咱們能夠經過監聽$route對象來實現;
修改user.vue的代碼
<template>
<div>
<h1>user</h1>
<p>歡迎回來,{{msg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
// msg: "我是page1組件"
msg:""
}
},
watch:{
//to表示即將要進入的那個組件，from表示從哪一個組件過來的
$route(to,from){
this.msg=to.params.name;
console.log(111);
}
}
}
</script>
效果圖以下：
咱們能夠很明顯的看到咱們監聽的$route對象被觸發了，控制檯也輸出了；
下面咱們來一塊兒看一下嵌套路由：
嵌套路由：
不少時候咱們的頁面結構決定了咱們可能須要嵌套路由，好比當咱們進入主頁以後有分類，而後當選擇其中一個分類以後進入對應的詳情，這個時候咱們就能夠用到嵌套路由；官方文檔中給咱們提供了一個children屬性，這個屬性是一個數組類型，裏面實際放着一組路由；這個時候父子關係結構就出來了，因此children屬性裏面的是路由相對來講是children屬性外部路由的子路由；
好記性不如爛代碼，讓咱們經過代碼來看一看：
首先在咱們的src目錄下新建兩個vue文件，分別是phone.vue和computer.vue
phone.vue
<template>
<div>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: "嵌套手機組件"
}
}
}
</script>
computer.vue
<template>
<div>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: "嵌套電腦組件"
}
}
}
</script>
而後咱們再修改咱們的App.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文件咱們能夠看到，咱們此時頁面只有一個page1的標籤了；
咱們再來修改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'; 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
爲了你們看的直觀點，其餘路由所有註釋了，頁面只剩下/page1這一個路由了；
上面說到了，children屬性其實就是一個子路由集合，數組結構裏面放着子路由；
效果圖以下：
路由導航兩種方式：
標籤導航：標籤導航<router-link><router-link>是經過轉義爲<a></a>標籤進行跳轉，其中router-link標籤中的to屬性會被轉義爲a標籤中的href屬性；
//跳轉到名爲user路由，並傳遞參數userId <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
編程式導航：咱們能夠經過this.$router.push()這個方法來實現編程式導航，固然也能夠實現參數傳遞，這種編程式導航通常是用於按鈕點擊以後跳轉
router.push({ name: 'user', params: { userId: 123 }})
這二者都會把路由導航到user/123路徑
命名路由：
有的時候，經過一個名稱來標識一個路由顯得更方便一些，因此官方爲了方便咱們偷懶，又給咱們在路由中添加了一個name屬性，命名這個屬性以後咱們訪問這個屬性就等於直接訪問到路由；
普通路由：
router.push({ path: '/user/:userId', params: { userId: 123 }})
命名路由：
router.push({ name: 'user', params: { userId: 123 }})
其實二者並無什麼區別，只是提供了兩種方式來訪問路由，能夠經過路徑來匹配也能夠經過別名來匹配；
今天的文章就到這裏，下篇咱們一塊兒來學習Vue路由守衛！！！
加油！！
- 1. .NET MVC路由機制詳細講解
- 2. vue - 詳細路由配置
- 3. Vue 路由詳解
- 4. vue-router路由講解
- 5. 指針超詳細 講解
- 6. Vue-router 路由詳解 多級路由
- 7. 【vuejs路由】vuejs 路由基礎入門實戰操做詳細指南
- 8. vueRouter 子路由嵌套
- 9. VueRouter路由的應用
- 10. 學習vue路由（詳解）
- 更多相關文章...
- • SQL 指南 - 網站建設指南
- • HTML 指南 - 網站建設指南
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • Flink 數據傳輸及反壓詳解
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. .NET MVC路由機制詳細講解
- 2. vue - 詳細路由配置
- 3. Vue 路由詳解
- 4. vue-router路由講解
- 5. 指針超詳細 講解
- 6. Vue-router 路由詳解 多級路由
- 7. 【vuejs路由】vuejs 路由基礎入門實戰操做詳細指南
- 8. vueRouter 子路由嵌套
- 9. VueRouter路由的應用
- 10. 學習vue路由（詳解）