Vue —— 精講 VueRouter（1）

access_timePosted on by admin

最近被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)
})

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

  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,後面我們再做詳細的講解

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線

※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

※南投搬家公司費用需注意的眉眉角角，別等搬了再說!

※教你寫出一流的銷售文案?