Vue —— 精講 VueRouter（1）
阿新 • • 發佈：2020-06-14
> 最近被Boos調去給新人做培訓去了，目前把自己整理的一些東西分享出來，希望對大家有所幫助
> demo原始碼地址：https://github.com/BM-laoli/BMlaoli-learn-VueRouter
# 本章節為VueRouter前端 路由的章節部分
# 大綱
## 一、基本概念
> 路由就是通過網路把訊息從源地址傳輸到目的地的活動
> 需要一些對映表
1. 做路由
2. 做資訊的轉發（核心就是：轉發）
### 後端路由還有前端路由，後端渲染和前端渲染
前端渲染（前後端分離API生態），後端渲染（view巢狀一起）
> 前端路由的核心概念
地址變化的時候改變url的時候，不進行整體頁面重新整理
### 改變url但是不重新整理頁面，的解決方式
> 我們有這樣的一個需求，改變url跳轉地址，我們獲取新的頁面，但是不希望頁面發生重新整理
#### 解決方案1：locaion.hash = '/'
> 這個是vueRouter的底層實現
監聽hash的變化，從而改變網頁資料的獲取機制，渲染對應的元件，
#### 解決方案2：H5的histroray模式
1. pushState
history.pushState({},'','home'),第三個引數就是url
這裡的push實際上就是一個棧結構（先進後出），
> 假設我們這裡需要回去,使用back()彈棧
```js
history.pushState({},'','home'),
history.pushState({},'','about'),
history.pushState({},'','user'),
//執行這個之後就能進行back()出棧了
history.back(),
// 此時的url是 /about
```
2. repalceState
> 這裡有一個方法和push方法很像，但是不會back()不能點選後腿按鈕
```js
history.repalceState({},'','user'),
```
3. go
> 這裡的go是對棧的一個操作，
go(-1)彈出一個
go(-2)彈出二個
go(1)壓入一個
go(2)壓入二個
```js
go(-1)
```
*以上就是我們的基本的前端路由原理*
## 二、v-router基本使用
> 前端三大框架都有自己的router，可以用來構建SPA應用
使用小提示，還是非常非常的簡單的：
1. 如果你沒有安裝就需要 npm install vue-router去安裝
2.
- 匯入路由物件，並且呼叫Vue.use(VueRouter)安裝這個路由外掛
- 建立路由例項，傳入對映配置wxain
- 在vue例項中掛載建立好了的路由
### 1.匯入路由物件，並且配置optionn給路由
/router/index.js
```js
/**
* 配置路由相關的資訊
*/
// 1. 匯入
import Router from 'vue-router'
// 2.1 匯入vue例項
import Vue from 'vue'
// 匯入元件
import Home from '../components/Home.vue'
import About from '../components/About.vue'
// 2.2使用路由（外掛），安裝外掛，vue的外掛，都是這樣安裝，Vue.use
Vue.use(Router)
// 3. 建立路路由物件，這個就是在Router裡面配置對映和物件等東西
// 4. 抽離配置項出來
const routes = []
const router = new Router({routes})
//4. 匯出
export default router
```
### 2.配置路由對映
/router/index.js
```js
const routes = [
{path:'/home',component:Home},
{path:'/about',component:About},
]
```
### 3.在例項中使用路由
/main.js
```js
import Vue from 'vue'
import App from './App'
import router from './router'//注意啊模組查詢規則index.js
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,// 主要是在這裡掛載進去就好了
render: h => h(App)
})
```
### 4.小心，我們的路由入口還有連線link
/App.vue
```html
首頁
關於
首頁
```
2. 更改模式replceStats 不允許瀏覽器回退
replace加上去就好了
```html
```
3. 我們可以利用一些預設的東西去非常方便的做到想要的效果
```html
```
替換值：我們希望不要怎麼長，我們希望.active就能改樣式怎麼搞?
加一個active-calss就好了，這個直接就是acitve做為類就好了
```html
首頁
```
### 程式碼路由跳轉，意思就是重定向
**注意啊！route != router**
在我們學習路由的時候，this.$router是一個非常重要的物件
> 這個東西在開中經常的使用
```js
// this.$router.push('重定向的值就好了')。
// this.$router.push('/home')
// 如果你不想有出現回退按鈕，這樣來做就好了
this.$router.replace('/home')
```
## 四、動態路由引數
*這裡只是簡單的介紹了理由傳參的位址列拼接模式，但是還有更多更奇奇怪怪的傳值方式，詳見官方Router文件,*
```js
this.$router.parmas
// 這個parmas裡面就是我們的路由引數存放點
```
> 這裡我們有這樣的一個需求，我們希望點選user頁面的時候可以，得到任意的路由引數
> 比如我們現在/user/zhnsang，的時候可以獲取zhangshang，/user/lishi的時候可以獲取lishi>
1. 首先我們需要在路由裡面加:
/router/index.js
```js
{
path: "/user/:usermsg",
component: User
}
]
```
2. 頁面傳遞資料
/App.vue
```html
router-link :to="'/user/'+username">使用者相關
news
message
我是首頁
我是首頁內容哈哈哈
``` /About.vue ```html我是關於頁面
我是首關於內容哈哈哈
``` *以上就是我們非常簡單的使用* ## 三、其它的知識點補充 ### 路由的預設值，並且修改成mode=>hisary模式 > 我們希望預設顯示的就是一個首頁 解決方式，對映一個'/’，然後進行重定向 /index.js ```js { path:'/', redirect:'/home' }, ``` >我是首頁
我是首頁內容哈哈哈