路由介紹

Vue router是 Vue.js的官方路由管理器，用于構建單頁面項目，在安裝Vue-cli時，選擇router即可安裝，期間有一個是否啟用history選項，可以先選擇no,也就是hash模式，可以在配置中更改成history模式，安裝后，npm run serve啟動項目，會發(fā)現(xiàn)link,單頁面鏈接，在hash模式下，鏈接地址前會有#號，改成history模式則沒有#號

更改模式在：src/router/index.js里，設置options:

const router = new? VueRouter({

????? mode? ： 'history', ? ? ?? //默認mode : 'hash'

????? routers

})

PS: 設置history模式，需要服務器環(huán)境配置的支持，手冊已經(jīng)給出各個服務的解決方案

PS：地址為：https://router.vuejs.org/zh/guide/essentials/history.mode.html

使用路由

安裝了router路由的腳手架，多了兩個目錄，且配置和入口文件也發(fā)生了改變，先來分析下入口文件main.js，比之前多了引入和注冊路由的內容；

引入路由

import? router? from? './router'

???? new Vue({

????? //注冊路由

??????????? router,

??????????? ....

})

分析App.vue中路由的各種元素，搭配router/index.js

router-link標簽

<router-link? to='/'>Home</router-link>

<router-link? to='/about'>About</router-link>

PS:? 1. <router-link>是組件導航，會被渲染成<a>超鏈接標簽

? ? ? ? 2. to屬性是鏈接地址，會被渲染成href屬性

const? routers = [

?????????? {

??????????????? path : '/',

??????????????? name: 'Home',

??????????????? component: Home

?????????? },

????????? {

??????????????? path: '/about',

??????????????? name: 'About',

??????????????? component: () => import('../views/About.vue')

??????????? }

?]

<router-link>對于的index.js部分，

//引入Vue.jsimport? Vue? from? 'vue'

//引入vue-router.jsimport? VueRouter? from? 'vue-router'

//引入Home組件import? Home? from? '../views/Home.vue'

參數(shù)是一個插件，路由就是一個插件

初始化這個插件以便使用

Vue.use(VueRouter)

這個常量用于設置每個組件的信息，然后交給路由插件注冊

const? routers = [

?????????????? {

?????????????????????? path: '/', //鏈接地址

?????????????????????? name: 'Home', //別名

?????????????????????? component: Home? //加載的組件

??????????????? }，?

?????????????? {

?????????????????????? path: '/about',?

?????????????????????? name: 'about', //另外一種組件加載模式，路由懶加載，

?????????????????????? component: () => import('../views/About.vue')

?????????????? }

]

實例化路由組件

? ? const router = new VueRouter({

? ? ? ? mode: 'hash',? //默認mode : 'hash'

? ? ? ? routers

? ? })

?導出路由

? ? export? default? router

回到App.vue, 導航鏈接下方有一個空標簽<router-view/>

<router-view/>渲染view目錄下的頁面組件，而components是功能性小組件

動態(tài)路由設置

所謂動態(tài)路由匹配：就是不確定的參數(shù)進行路由映射到同一組件上去，比如經(jīng)典的：user?id: 5, 這個5就是動態(tài)的數(shù)值，最終路徑：user/5

模式 匹配路徑 $router.params

順帶說下vue-router傳參的兩種方式的區(qū)別（query和params）

?????? query類似get請求，頁面跳轉后，會在地址欄上顯示請求的參數(shù)

?????? 而 params 類似post請求，頁面跳轉后，地址欄上不會顯示請求的參數(shù)信息

1. query傳參的方式以及去接收參數(shù)

??? 傳參：

???? this.$router.push ({??

?????????????????????????? path: '/list',

?????????????????????????? query: {

????????????????????????????????? id: id

??????????????????????????? }

????????????????????? })

???? 接收參數(shù)：

???? this.$route.query.id

2. params傳參的方式以及去接收參數(shù)

???? 傳參：

????? this.$router.push({

????????????????????????????? name: 'list',??? //params里面只能是這種格式，不能是path:'/list'這種形式，因為params只能通過name來引入路由。

????????????????????????????? params: {

?????????????????????????????????????? id: id

?????????????????????????????? }

?????????????????????? })

????? 接收參數(shù)：

????? this.$router.params.id

/user/:id /user/5 { id : 5 }

/user/:id/post/:name /user/5/post/lee { id : 5, post : 'lee' }

創(chuàng)建user頁面組件后，先采用query模式：user ? id = 5 ;

<template>

? ? <h3>

? ? ? ? User Id : {{$router.query.id}}

? ? </h3>

</template>

如果要使用動態(tài)路由，先需要在path里配置相關路由規(guī)則，然后再獲取；

{

??????? path : '/user/:id',

??????? name: 'User',

??????? component : User

},

<template>

? ? <h3>

? ? ? ? User Id : {{ $router.params.id }}

? ? </h3>

</template>

PS:? $route對象的相關屬性

創(chuàng)建兩個不同參數(shù)但同一組件調用的鏈接，方便來回點擊調試

<router-link to="/user/5">user/5</router-link>

<router-link to="/user/6">user/6</router-link>

由于動態(tài)路由訪問的都是同一組件不同參數(shù)，組件會被復用以提升效率，可以通過watch監(jiān)聽對象，來監(jiān)聽$router(to,from)判斷去處和來源；

有時路由不存在會得不到任何結果，可以設置捕獲所有路由或404

{

??? path: '*',

??? name: 'Home',

??? component: Home

},

{

??? path: '/user-*',

??? name: 'Home',

??? component: Home

}

在App.vue中，創(chuàng)建script，來監(jiān)聽動態(tài)路由的變化；

<script>

? ? export default {

? ? ? ? watch : {

? ? ? ? ? ? $route(to,from) {

? ? ? ? ? ? ? ? console.log(to)

? ? ? ? ? ? ? ? console.log(from)

? ? ? ? ? ? }

? ? ? ? }

? ? }

</script>

嵌套路由的使用

嵌套路由的三種匹配方式，第一種是固定路由，二三種是兩種動態(tài)路由：

模式 匹配路徑

/news/music /news/music

/user/:id/profile /user/5/profile

/user/:id/posts /user/5/posts

可以在views目錄下創(chuàng)建user目錄，并分別創(chuàng)建UserProfile和UserPosts:

<template>

? ? <h3>

? ? ? ? UserProfile: {{ $route.params.id }}

? ? </h3>

</template>

<template>

? ? <h3>

? ? ? ? UserPosts: {{ $route.params.id }}

? ? </h3>

</template>

在route/index.js配置路由規(guī)則，在User組件中配置子路由；

{

?????? path: '/user/:id',

?????? name: 'User',

?????? component: User,

?? children : [

????????? {

?????????????? path : 'profile',

?????????????? component: UserProfile

????????? },

????????? {

??????????????? path :? 'posts',

??????????????? component: UserPosts

????????? }

???? ]

}

注： 組件名稱和路徑設置的不一樣，路由采用的是路徑

子路由不需要 /? ,? 因為斜杠會被當成根路徑

在User.vue 這個父路由，需要使用視圖渲染加載子路由：

<template>

? ? <div>

? ? ? ? <h3>

? ? ? ? ? ? User? Id? :? {{ $route.params.id }}

? ? ? ? </h3>

? ? </div>

</template>

注：<router-view>外層需要有一個元素標簽，否則會報錯

如果父路由，遇到?jīng)]有可渲染的子路由，可以設置一個空路由

{

????? path : '*',

????? component : List

}