vue路由 vue-router 詳解 0基礎

Vue-router

1、概念

什麼是路由？
根據用戶請求的路徑來展示不同的頁面或返回不同的數據

2、路由的分類

• 前端路由
• 後端路由

前端路由：
根據用戶請求不同的url來展示不同的頁面或者數據，前端路由是不會涉及到後端請求的，以及頁面不會進行刷新，對於用戶來說體驗比較好，一般是用來做單頁面開發( SPA )的。前端路由的底層原理：hashchange和H5的history API中的popState和replaceState來實現的

後端路由：
根據用戶請求的路徑來返回不用的數據或者頁面，後斷路由一般情況下都是用來做接口的，通過ajax請求的路徑來返回相應的數據

接下來講解自己搭建的項目如何使用 vue-router

3、vue中的路由 vue-router

3.1 安裝vue-router

npm install vue-router -S
或者
yarn add vue-router -S

3.2 創建router文件夾，並在文件夾裏創建index.js文件

路由的配置項：

• mode：路由的一種形式，默認是hash模式，另一種是history模式
• routes：數組，其中包含N多個對象，每一個對象都是一個路由的配置項
  routes包含的屬性：
• path：匹配路由的路徑
• component：路由路徑匹配成功後顯示的組件
• redirect：路由重定向
• name：命名路由
• props：路由解耦
• children：路由嵌套
• meta：路由元信息( 路由攜帶的一些獨有信息 )

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index form '../views/pages/index/Index.vue'

Vue.use(VueRouter)

let router = new VueRouter({
	mode:'hash',
	routes:[
		{
				path:'/index',
				component:Index
		}
]
})

export default router

在main.js裏，將router掛載到Vue上

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

 	new Vue({
			router,
			render:h=>h(app)
	}).$mount('#app')

此時訪問index頁面，還是不能進行正確的顯示，是因爲還沒有配置完成。在將router掛載到vm實例上的時候，就會自動多出兩個內置組件 router-link 和 router-view，router-link 負責進行路由的跳轉，
router-view 負責渲染路由匹配的組件 （注意，需要在根組件配置一個router-view纔可正確的顯示）

app.vue

<template>
	<div id='app'>
			<router-view></router-view>
	</div>
</template>

4、路由跳轉方式

1. 通過a標籤
2. 通過router-link
3. 編程式導航

4.1 路由跳轉之a標籤

<a href = " # /index "> index </a>
<a href = " # /mine"> mine</a>

使用a標籤，有一個小缺點，就是不太方便知道當前選中的是哪個值

4.2 路由跳轉之 router-link

<router-link to = " / index "> index </router-link>
<router-link to = " / mine"> mine</router-link>

需要注意的是，router-link裏有一個 to屬性，to屬性的值就是需要跳轉到的路徑。其實router-link寫完之後，在瀏覽器上預覽的時候，看到的本質還是一個a標籤，to的值和屬性就變成了a標籤的href屬性。但是比單純寫a標籤多了一個屬性，在當前選中的a標籤上多了一個router-link-active,如圖

如此這樣，就很方便爲選中的標籤添加相應的樣式
router-link還有一個屬性爲tag,就是將router-link渲染成指定的標籤,例如像將其改爲 li 標籤，如圖

<router-link tag = ' li '  to = " / index "> index </router-link>

此處，是官網router-link的詳解的鏈接

如果初打開項目，不會進行任何展示，因爲url欄裏沒有任何路由，所以我們需要在router文件夾的index.js裏配置一個空路由，然後利用redirect重定向，來默認顯示我們想要看到的頁面。若果隨意在地址欄裏輸入一攛弄我們沒有配置的路由，我們還要配置一個404頁面

import NotFound from ' ../views/notfound/NotFound.vue '
{
	path:' / ',
	redirect : ' / index  '
},
{
	path : ' ** ',
	component: NotFound 
}

5、路由傳值

不同的頁面間直接需要相互傳遞數據來進行數據的請求或者進行數據的渲染，因此需要路由傳值

5.1動態路由傳值

1. 在定義路由的時候，在path路由處通過 /：屬性的方式來定義傳遞參數的屬性
2. 在路由跳轉的時候，在路徑跳轉處通過 / 值的方式來進行傳值
3. 在需要接受參數的頁面，通過this.$route.params 的方式來進行接收

傳值：
舉例 一

import Detail form ' ../views/detail/Detail.vue'
{
	path : ' / detail /:sex /:age ',
	component : Detail
}

舉例 二

	<router-link tag = ' li '  to = " ' / detail ?sex=' +  name + '&age=' +18 "> index </router-link>

接收值：
舉例
在一個單文件組件裏，在created生命週期裏可使用this.$route.params進行接收,然後可根據接收到的值進行視圖的渲染

created(){
	let { sex,age} = this.$route.params;
}

5.2query傳值

舉例

	<router-link tag = ' li '  to = "  { name:' detail ' , query:{ sex:'man',age:18 } }  "> index </router-link>

以上就是動態路由傳值和 query傳參的格式。但需要注意的是，它們之間有些區別。使用動態路由傳值，這個值是必須填寫的,而如果使用query的方式傳值，值是非必填寫的

5.3路由解耦

路由解耦只適用於動態路由

1. 在定義路由的時候，在path路由處通過 /：屬性的方式來定義傳遞參數的屬性
2. 在定義路由的時候，添加一個屬性props爲true
3. 在路由跳轉的時候，在路徑跳轉處通過 / 值的方式來進行傳值
4. 在需要接受參數的頁面，通過props進行接收即可

傳值：
舉例 一

import Detail form ' ../views/detail/Detail.vue'
{
	path : ' / detail /:sex /:age ',
	component : Detail,
	name: detail,
	props：true
}

接收值：
舉例

props:[ 'sex' , 'age'] 

5.4、編程式導航

所謂的編程式導航，也就是通過js的方式來進行跳轉
在 Vue 實例內部，你可以通過 $router訪問路由實例。因此你可以調用 如下方法

this.$router.push 
this.$router.go
this.$router.back
this.$router. forward
this.$router.replace

前提條件，在頁面觸發methods裏的一個方法
舉例 一
this.$router.push
將當前的路由替換掉url欄的路由，並且會增加一條歷史記錄

handlePush(params){
   this.$router.push (' /detial/'+ params)
  }

舉例 二
this.$router.go
指定前進/回退的步數，這裏的前進後退能否執行，取決於瀏覽器中是否有瀏覽歷史記錄

• this.$router.go(0) 刷新當前頁面
• this.$router.go(-1) 後退一步記錄，等同於 history.back()，如果history 記錄不夠用，那就默默地失敗唄
• this.$router.go(1) 在瀏覽器記錄中前進一步，等同於 history.forward()

handleGo(){
   this.$router.go(0)
  }

舉例 三

this.$router.back
後退一步記錄

handleBack(){
  this.$router.back()
 }

舉例 四

this.$router.forward
前進一步記錄

handleForward(){
  this.$router.forward()
 }

舉例 五
this.$router.replace
將指定的路由替換點url欄裏的路由，但需要注意的是此時不會生成一條新的歷史記錄

handleReplace(){
  this.$router.replace('/index')
 }

6、嵌套路由

實際生活中的應用界面，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動態路徑也按某種結構對應嵌套的各層組件
比如

/a
/b
/a/ab
/a/ac
/b/ba

諸如此類，那麼應該如何實現路由的嵌套呢
在router文件夾index.js裏修改配置

{
	path:' / ',
	redirect : ' / index  '
},
{
	path : ' /index ',
	component: Index,
	children:[
		{
			path:' /index/city',
			component: City
		},
		{
			path:' /index/search ',
			component:Search
		},
	]
}

在index.vue裏修改

<router-link tag='/index/city'>city</router-link>
<router-link tag='/index/search'>search</router-link>
<router-view'></router-view>

注意使用 router-link來路由跳轉時，需要和 router-view來配對使用。將router-link跳轉的內容顯示在router-view裏

7.路由元信息 meta

在我們進行限權的時候，如果要意義判斷是從哪個路由地址跳轉到此路由，無疑是很繁瑣的。那麼有沒有一個比較簡單易操作的方法呢？
我們可以直接在路由配置的時候，給每個路由添加一個自定義的meta對象，在meta對象中可以設置一些狀態，來進行一些操作。用它來做校驗再合適不過了
舉例

{
  path: '/active',
  name: 'Active',
  component: Active,
  meta: {
    login_require: false
  },
  {
  path: '/goodslist',
  name: 'goodslist',
  component: Goodslist,
  meta: {
    login_require: true
  },

這裏我們只需要判斷item下面的meta對象中的login_require是不是true，就可以做一些限制了

router.beforeEach((to, from, next) => {
  if (to.matched.some(function (item) {
    return item.meta.login_require
  })) {
    next('/login')
  } else 
    next()
})