Vue —— 精講 VueRouter(1)

BM老李發表於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()彈棧

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

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

  1. repalceState

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

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

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

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

go(-1)

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

二、v-router基本使用

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

使用小提示,還是非常非常的簡單的:

  1. 如果你沒有安裝就需要 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)
}) 

/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的屬性

  1. tage
    to是一個屬性 ,預設是渲染成一個a連結,假設我現在需要預設渲染成一個buttmm怎麼辦呢?
    加一個tag就好了
    <router-link to='/home' tag='button'  >首頁</router-link>
  1. 更改模式replceStats 不允許瀏覽器回退
    replace加上去就好了
<router-link to='/about' tag='button' replace >關於</router-link>
  1. 我們可以利用一些預設的東西去非常方便的做到想要的效果
<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>

  1. 首先我們需要在路由裡面加:
    /router/index.js
   {
        path: "/user/:usermsg",
        component: User
    }
]
  1. 頁面傳遞資料
    /App.vue
router-link :to="'/user/'+username">使用者相關</router-link>
<!-- 路由出口,既:渲染的出口,這個就是一個佔位符號 -->
<router-view></router-view>
  </div>
</template>

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

  1. 頁面獲取資料

一定要注意了,一定是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

路由懶載入

  1. 概念的理解

目前呢,我們打包的情況是這樣的:我們所有的程式碼都是集中放在了以一個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
  1. 如何使用

使用非常的簡單,主要有如下的三種方式去使用,但是我最喜歡的還是最後一種方式
/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去到另一個子元件

  1. 首先 我們需要有元件
    /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>
  1. 在路由裡面去配置
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
            },

        ]
    },
    {
  1. 打入口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,後面我們再做詳細的講解

相關文章