Vue —— 精講 VueRouter（1）

BM老李發表於2020-06-14

Vue

最近被Boos調去給新人做培訓去了，目前把自己整理的一些東西分享出來，希望對大家有所幫助

demo原始碼地址：https://github.com/BM-laoli/BMlaoli-learn-VueRouter

本章節為VueRouter前端路由的章節部分

大綱

一、基本概念

路由就是通過網路把訊息從源地址傳輸到目的地的活動
需要一些對映表

做路由
做資訊的轉發（核心就是：轉發）

後端路由還有前端路由，後端渲染和前端渲染

前端渲染（前後端分離API生態），後端渲染（view巢狀一起）

前端路由的核心概念
地址變化的時候改變url的時候，不進行整體頁面重新整理

改變url但是不重新整理頁面，的解決方式

我們有這樣的一個需求，改變url跳轉地址，我們獲取新的頁面，但是不希望頁面發生重新整理

解決方案1：locaion.hash = '/'

這個是vueRouter的底層實現

監聽hash的變化，從而改變網頁資料的獲取機制，渲染對應的元件，

解決方案2：H5的histroray模式

pushState
history.pushState({},'','home'),第三個引數就是url

這裡的push實際上就是一個棧結構（先進後出），

假設我們這裡需要回去,使用back()彈棧

history.pushState({},'','home'),
history.pushState({},'','about'),
history.pushState({},'','user'),

//執行這個之後就能進行back()出棧了
history.back(),
// 此時的url是 /about

repalceState

這裡有一個方法和push方法很像，但是不會back()不能點選後腿按鈕

history.repalceState({},'','user'),

這裡的go是對棧的一個操作，
go(-1)彈出一個
go(-2)彈出二個

go(1)壓入一個
go(2)壓入二個

go(-1)

以上就是我們的基本的前端路由原理

二、v-router基本使用

前端三大框架都有自己的router，可以用來構建SPA應用

使用小提示，還是非常非常的簡單的：

如果你沒有安裝就需要 npm install vue-router去安裝
- 匯入路由物件，並且呼叫Vue.use(VueRouter)安裝這個路由外掛
- 建立路由例項，傳入對映配置wxain
- 在vue例項中掛載建立好了的路由

1.匯入路由物件，並且配置optionn給路由

/router/index.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

const routes = [
 
 {path:'/home',component:Home},
 {path:'/about',component:About},

]

3.在例項中使用路由

/main.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


<template>
  <div id="app">
    <!-- //這兩個是一個全域性祖冊過著個元件，這個就是一個a標籤 -->
    <router-link to='/home'>首頁</router-link>
    <router-link to='/about'>關於</router-link>
    <!-- 路由出口,既：渲染的出口，這個就是一個佔位符號 -->
    <router-view></router-view>
  </div>
</template>

以下是我們的兩個元件

/Home.vue

<template>
    <div>
        <h2>我是首頁</h2>
        <p>我是首頁內容哈哈哈</p>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

/About.vue

<template>
    <div>
        <h2>我是關於頁面</h2>
        <p>我是首關於內容哈哈哈</p>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style>

</style>

以上就是我們非常簡單的使用

三、其它的知識點補充

路由的預設值，並且修改成mode=>hisary模式

我們希望預設顯示的就是一個首頁
解決方式，對映一個'/’，然後進行重定向
/index.js

  {
    path:'/',
    redirect:'/home'
  },

我們為什麼要去做這調整成一個history，因為我們希望去掉#這個標識

只需要在new 的時候指定一下就好了
/index,js

const router = new Router({
  routes,
  mode:"history"//就是這裡的這個更改路由方式
})

router-link的屬性

tage
to是一個屬性，預設是渲染成一個a連結，假設我現在需要預設渲染成一個buttmm怎麼辦呢？
加一個tag就好了

    <router-link to='/home' tag='button'  >首頁</router-link>

更改模式replceStats 不允許瀏覽器回退
replace加上去就好了

<router-link to='/about' tag='button' replace >關於</router-link>

我們可以利用一些預設的東西去非常方便的做到想要的效果

<style>
.router-link-active{
  color: blue;
}
</style>

替換值：我們希望不要怎麼長，我們希望.active就能改樣式怎麼搞?
加一個active-calss就好了，這個直接就是acitve做為類就好了

 <router-link to='/home' tag='button'  active-class  >首頁</router-link>
 <style>
    .active{
        bgc:red
    }
 </style>

程式碼路由跳轉，意思就是重定向

注意啊！route != router
在我們學習路由的時候，this.$router是一個非常重要的物件

這個東西在開中經常的使用

// this.$router.push('重定向的值就好了')。
// this.$router.push('/home')
// 如果你不想有出現回退按鈕，這樣來做就好了
this.$router.replace('/home')

四、動態路由引數

這裡只是簡單的介紹了理由傳參的位址列拼接模式，但是還有更多更奇奇怪怪的傳值方式，詳見官方Router文件,

this.$router.parmas
// 這個parmas裡面就是我們的路由引數存放點

這裡我們有這樣的一個需求，我們希望點選user頁面的時候可以，得到任意的路由引數

比如我們現在/user/zhnsang，的時候可以獲取zhangshang，/user/lishi的時候可以獲取lishi>

首先我們需要在路由裡面加:
/router/index.js

   {
        path: "/user/:usermsg",
        component: User
    }
]

頁面傳遞資料
/App.vue

router-link :to="'/user/'+username">使用者相關</router-link>
<!-- 路由出口,既：渲染的出口，這個就是一個佔位符號 -->
<router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      username: 'lisi'
    }
  },

頁面獲取資料

一定要注意了，一定是rouer裡面定義的才能從另一路由拿出來

/User.vue


<template>
    <div>
        <h2>我是使用者相關專業</h2>
        <p>我是使用者訊息相關頁面，嘿嘿嘿嘿嘿</p>
        <h1>{{ $route.params.usermsg }}44</h1>
        <hr>
        <h2>{{username}}</h2>
    </div>
</template>

<script>
    export default {    
        computed: {
            username() {
                return this.$route.params.usermsg
            }
        },
    }
</script>

<style scpoe>

</style>

五、細節詳解

注意啊！再說一遍route != router

注意啊，這裡的$route實際上是我們在main裡面new的一個Router得到的,
並且這個route物件是隨著請求的地方不一樣，而改變的。也就是說，這個的route是當前頁面中的route物件，而且在vue只能只有一個route例項存在

六、 Vue的webpack打包詳解 + 路由懶載入

一個vue專案的簡單打包目錄結構分析

我們來看看,在一個vue專案中，簡單的三個檔案是怎麼打包的

假設目前有這樣的三個檔案，我們需要對他們進行打包，mian是入口，有一個add業務，有一個math依賴模組。那麼我們webpack打包成的三個檔案到底是如何執行的呢？

在vue中使用webpack打包的時候，會把一些東西給分模組的打包出來，它打包的東西的目錄結構如下
裡面我們實際打包的時候會把css，js都給分開，各自有各自的作用

| dist
| ---static
| ---css
| ---js
| -----app.XXXX.js         (這個是專案的業務邏輯所在)
| -----manifest.xxxx.js    (這個是底層打包的依賴檔案所在)
| -----vendor.xxxx.js      (這個是依賴所在)
| idnex.html

路由懶載入

概念的理解

目前呢，我們打包的情況是這樣的：我們所有的程式碼都是集中放在了以一個app.xxx.js檔案中，這樣其實不利於後期的維護和開發，因為如果我們有很多很多的大量的程式碼的時候，我們的這個檔案就會變得非常非常的大，於是呢，我們就需要路由懶載入，所謂懶載入就是：‘在需要的時候，才去載入某個資原始檔’，路由懶載入，就是把每一個路由對應的業務邏輯程式碼，在打包的時候分割到不同的js檔案中，如何在需要用的時候再去請求它

經過這樣的打包的懶載入之後，我們的目錄會變成這個樣子

| dist
| ---static
| ---css
| ---js
| -----0.xxx.js            (假設是路由home的業務邏輯程式碼)
| -----1.xxx.js             (假設是路由about的業務邏輯程式碼)
| -----app.XXXX.js         (這個是專案的業務邏輯所在)
| -----manifest.xxxx.js    (這個是底層打包的依賴檔案所在)
| -----vendor.xxxx.js      (這個是依賴所在)
| idnex.html

如何使用

使用非常的簡單，主要有如下的三種方式去使用,但是我最喜歡的還是最後一種方式
/rouetr/index.js

- 使用vue的非同步組價和webpack的寫法，早期的時候
const Home = resolve =>{ require.ensure(['../compenet/Home.vue'],()=>{
   resolve (require('../compenet/Home.vue'))
})}

- AMD規範的寫法
const About = resolve =>{ require(['../compenent/About.vue'],resolve) }


- ES6的結合非同步元件的方式（最常用）
const Home = () => import('../compenet/Home.vue')

實際的使用
/router/index.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'
// import User from '../components/User'
const Home = () =>
    import ('../components/Home.vue')
const About = () =>
    import ('../components/About.vue')
const User = () =>
    import ('../components/User')


// 2.2使用路由（外掛），安裝外掛，vue的外掛，都是這樣安裝，Vue.use
Vue.use(Router)

// 3. 建立路路由物件，這個就是在Router裡面配置對映和物件等東西

// 4. 抽離配置項出來
const routes = [{
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
    {
        path: "/user/:usermsg",
        component: User
    }
]

const router = new Router({
    routes,
    mode: "history"
})

//4. 匯出
export default router

//6. 去main裡面掛載

七、路由巢狀

我們目前有這樣的一個需求：我們希望我們在hone下，可以/home/new去到home下的一個子元件，/home/message去到另一個子元件

首先我們需要有元件
/components/HomeMessage.vue

<template>
    <div>
      <ul>
          <li1>我是訊息1</li1>
          <li2>我是訊息2</li2>
          <li3>我是訊息3</li3>
          <li4>我是訊息4</li4>
      </ul>
    </div>
</template>

<script>
    export default {
        name:"HomeMessage"
    }   
</script>

<style>

</style>

/components/HomeNews

<template>
    <div>
    <ul>
        <li1>新1</li1>
        <li2>新2</li2>
        <li3>新3</li3>
        <li4>新4</li4>
        <li5>新5</li5>
    </ul>
    </div>
</template>

<script>
    export default {
        name:"HomeNews"
    }
</script>

<style>

</style>

在路由裡面去配置

const HomeNews = () =>
    import ('../components/HomeNews')
const HomeMessage = () =>
    import ('../components/HomeNews')


// 2.2使用路由（外掛），安裝外掛，vue的外掛，都是這樣安裝，Vue.use
Vue.use(Router)

// 3. 建立路路由物件，這個就是在Router裡面配置對映和物件等東西

// 4. 抽離配置項出來
const routes = [{
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home,
        children: [{
                path: '',
                redirect: 'news'
            },
            {
                path: 'news',// 這裡寫路由實際上應該是/home/news,這裡只是一個相對路由地址，
                component: HomeNews
            },
            {
                path: 'message',
                component: HomeMessage
            },

        ]
    },
    {

打入口router-view（瞎起的名字實際上就是路由的佔位符）
/Home.vue

<template>
    <div>
        <h2>我是首頁</h2>
        <p>我是首頁內容哈哈哈</p>
     <router-link to="/home/news">news</router-link>
     <router-link to="/home/message">message</router-link>
    <router-view></router-view>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

這裡如果是有關狀態的保持，我們需要使用key-alive,後面我們再做詳細的講解

Vue —— VueX精講(1）
2020-06-11
Vue
CUDA精講（1）
2020-10-09
方法精講-言語1筆記
2024-08-16
筆記
VueRouter小手冊
2020-05-23
Vue
Synchronized 精講
2021-01-11
synchronized
Mysql 索引精講
2019-05-08
MySql索引
精講Redis：持久化
2018-06-21
Redis持久化
手把手教你寫VueRouter
2020-08-18
Vue
手寫vueRouter-Hash模式
2020-12-13
Vue模式
React高階元件精講
2018-09-14
React元件
Java設計模式精講
2019-05-20
Java設計模式
一本讓你醍醐灌頂的小冊：《Vue.js元件精講》
2018-12-20
Vue.js元件
VueRouter改變頁面標題
2019-10-24
Vue
精講RestTemplate第1篇-在Spring或非Spring環境下如何使用
2020-07-31
RESTSpring
精講Redis記憶體模型
2018-06-19
Redis記憶體模型
【原創】HashMap複習精講
2019-08-05
HashMap
Flutter動畫之粒子精講
2019-07-16
Flutter動畫
精講Python中的requests方法
2021-09-11
Python
分散式之 Redis 複習精講
2018-05-28
分散式Redis
Mvvm 前端資料流框架精講
2018-04-01
MVVM前端框架
Django模型中的save方法精講
2024-07-27
Django模型
微信小程式開發精講
2024-10-15
微信小程式
c# System.Text.Json 精講
2021-11-29
C#JSON
可能比文件還詳細--VueRouter完全指北
2018-08-27
Vue
《Java核心技術面試精講》27講學習總結
2021-01-03
Java面試
VUE_入門講義
2021-01-05
Vue
史上最詳細的 webpack 講解 1 （vue-cli 中 build.js）
2019-03-04
WebVueUIJS
精講響應式webclient第1篇-響應式非阻塞IO與基礎用法
2020-08-20
Webclient
2021李林精講精練880題【數學二解析分冊】
2020-10-18
精讀《vue-lit 原始碼》
2022-02-14
Vue原始碼
精講Redis服務架構分析與搭建
2018-06-17
Redis架構
PHP 函式庫精講之類與物件
2020-02-07
PHP函式物件
精講Flutter官網的第一個例子
2019-01-29
Flutter
2024年10月精選技術演講
2024-10-27
Go runtime 排程器精講（七）：案例分析
2024-09-15
Go
【JAVA】筆記（8）--- java.lang.String 精講
2021-11-15
Java筆記
併發條件佇列之Condition 精講
2021-01-27
佇列
vue1
2018-07-22
Vue