Vue.js-vuerouter詳解

本文轉載自查看原文 2021-10-28 19:59 180 Vue.js(2.x)

1.1 什么是路由

路由（routing）就是通過互聯的網絡把信息從源地址傳輸到目的地址的活動。路由中有一個非常重要的概念叫路由表，路由表本質上就是一個映射表, 決定了數據包的指向。

后端路由渲染(JSP)

早期的網站開發整個HTML頁面是由服務器來渲染的，服務器直接生產渲染好對應的HTML頁面, 返回給客戶端進行展示。后端處理URL和頁面之間的映射關系！！

具體流程

一個頁面有自己對應的網址, 也就是URL。
URL會發送到服務器, 服務器會通過正則對該URL進行匹配, 並且最后交給一個控制器進行處理。
控制器進行各種處理, 最終生成HTML或者數據, 返回給前端(Java代碼作用是從數據庫中讀取數據，並將它動態的放在頁面中)。

后端渲染優點

當頁面中需要請求不同的路徑內容時, 交給服務器來進行處理, 服務器渲染好整個頁面, 並且將頁面返回給客戶頓。
這種情況下渲染好的頁面, 不需要單獨加載任何的js和css, 可以直接交給瀏覽器展示, 這樣也有利於SEO的優化。

后端渲染缺點

是整個頁面的模塊由后端人員來編寫和維護的。
另一種情況是前端開發人員如果要開發頁面, 需要通過PHP和Java等語言來編寫頁面代碼。
而且通常情況下HTML代碼和數據以及對應的邏輯會混在一起, 編寫和維護都是非常糟糕的事情。

前后端分離階段

前后端分離優點

隨着Ajax的出現, 有了前后端分離的開發模式，后端只提供API來返回數據, 前端通過Ajax獲取數據, 並且可以通過JavaScript將數據渲染到頁面中。
這樣做最大的優點就是前后端責任的清晰, 后端專注於數據上, 前端專注於交互和可視化上。
並且當移動端(iOS/Android)出現后, 后端不需要進行任何處理, 依然使用之前的一套API即可，目前很多的網站依然采用這種模式開發。

SPA頁面階段

SPA頁面是單頁富應用，整個網頁只有一個html頁面！！！其實SPA最主要的特點就是在前后端分離的基礎上加了一層前端路由。

1.2 認識vue-router

創建項目

vue init webpack 05-vueroutertest

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用於構建單頁面應用。

vue-router是基於路由和組件的

路由用於設定訪問路徑, 將路徑和組件映射起來，在vue-router的單頁面應用中, 頁面的路徑的改變就是組件的切換。

1.2.1 安裝vue-router

步驟一: 安裝vue-router

cnpm install vue-router --save

步驟二: 在模塊化工程中使用它(因為是一個插件, 所以可以通過Vue.use()來安裝路由功能)

第一步：導入路由對象，並且調用 Vue.use(VueRouter)。
第二步：創建路由實例，並且傳入路由映射配置。

第三步：在Vue實例中掛載創建的路由實例

1.2.2 使用vue-router的步驟

第一步: 創建路由組件。

第二步: 配置路由映射: 組件和路徑映射關系。

第三步: 使用路由: 通過<router-link>和<router-view>。

<router-link>: 該標簽是一個vue-router中已經內置的組件, 它會被渲染成一個<a>標簽。
<router-view>: 該標簽會根據當前的路徑, 動態渲染出不同的組件。
網頁的其他內容, 比如頂部的標題/導航, 或者底部的一些版權信息等會和<router-view>處於同一個等級。
在路由切換時, 切換的是<router-view>掛載的組件, 其他內容不會發生改變。

執行結果

路由的默認路徑

讓路徑默認跳到到首頁, 並且<router-view>渲染首頁組件。

index.js

配置解析:

在routes中又配置了一個映射，path配置的是根路徑: /
redirect是重定向, 也就是我們將根路徑重定向到/home的路徑下。

HTML5的History模式

改變路徑的方式有兩種: URL的hash，HTML5的history。
默認情況下, 路徑的改變使用的URL的hash。

如果希望使用HTML5的history模式, 非常簡單, 進行如下配置即可。

router-link其他屬性

tag可以指定<router-link>之后渲染成什么組件。
replace不會留下history記錄, 所以指定replace的情況下, 后退鍵返回不能返回到上一個頁面中。
當<router-link>對應的路由匹配成功時, 會自動給當前元素設置一個router-link-active的class，設置active-class可以修改默認的名稱。但是通常不會修改類的屬性, 會直接使用默認的router-link-active即可。

修改linkActiveClass

class具體的名稱也可以通過router實例的屬性進行修改。exact-active-class類似於active-class, 只是在精准匹配下才會出現的class。

1.2.3 路由代碼跳轉

有時候, 頁面的跳轉可能需要執行對應的JavaScript代碼, 這個時候, 就可以使用第二種跳轉方式了。

1.3 路由的懶加載

1.3.1 動態路由

在某些情況下，一個頁面的path路徑可能是不確定的，當進入用戶界面時，希望是如下的路徑。

/user/userid或/user/username，這種path和Component的匹配關系，稱之為動態路由。

代碼示例

User.vue

<template>
  <div>
    <h3>用戶界面</h3>
    <p>學習Vue.js!!!</p>
    <h3>{{userId}}</h3>
    <!--直接拿-->
    <!-- <h2>{{$route.params.userid}}</h2> -->
  </div>
</template>

<script>
    export default {
        name: "User",
        computed:{
            userId(){
                // 拿到的是哪個路由處於活躍狀態，就是拿到哪個路由！！
                return this.$route.params.userid
            }
        }
    }
</script>

<style scoped>

</style>

index.js

// 配置路由相關的信息
import Vue from 'vue'

// 導入組件
import User from "../components/User";
import VueRouter from 'vue-router';

// 1.通過Vue.use(插件)，安裝插件
Vue.use(VueRouter)

// 2.定義路由
const routes = [
  {
    path:'/user/:userid',
    component: User
  }
]

// 3.創建router實例
const router = new VueRouter({
  // 配置路由和組件之間的應用關系
  routes,
  mode:'history',
  linkActiveClass: 'active'
})

// 4.導出router實例
export default router

APP.vue

<template>
  <div id="app">
    <h2>中國大學mooc</h2>
    <router-link :to="'/user/'+ userId" tag="button" replace>用戶</router-link>
    <router-view></router-view>
    <h3>沒有圍牆的大學！！</h3>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        userId: 'guardwhy'
      }
    }
  }
</script>

<style>
  .active{
    color: red;
  }
</style>

執行結果

1.3.2 路由的懶加載

當打包構建應用時，Javascript 包會變得非常大，影響頁面加載。
如果能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。

路由懶加載做了什么?

路由懶加載的主要作用就是將路由對應的組件打包成一個個的js代碼塊。
只有在這個路由被訪問到的時候, 才加載對應的組件。

懶加載的方式

方式一: 結合Vue的異步組件和Webpack的代碼分析。

const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};

方式二: AMD寫法

const About = resolve => require(['../components/About.vue'], resolve);

方式三: 在ES6中, 我們可以有更加簡單的寫法來組織Vue異步組件和Webpack的代碼分割。

const Home = () => import('../components/Home.vue')

路由懶加載的效果

1.4 嵌套路由

嵌套路由是一個很常見的功能。比如在home頁面中, 希望通過/home/news和/home/message訪問一些內容，一個路徑映射一個組件, 訪問這兩個路徑也會分別渲染兩個組件。

路徑和組件的關系如下

實現嵌套路由有兩個步驟

創建對應的子組件, 並且在路由映射中配置對應的子路由。

index.js

在組件內部使用<router-view>標簽。

執行結果

14.5 傳遞參數的方式

傳遞參數主要有兩種類型: params和query。

params的類型

配置路由格式: /router/:id
傳遞的方式: 在path后面跟上對應的值
傳遞后形成的路徑: /router/123, /router/abc。

query的類型

配置路由格式: /router, 也就是普通配置。
傳遞的方式: 對象中使用query的key作為傳遞方式。
傳遞后形成的路徑: /router?id=123, /router?id=abc。

傳遞參數方式一:

Profile.vue

<template>
  <div>
    <p>用戶基本檔案</p>
  </div>
</template>

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

<style scoped>
</style>

index.js

// 配置路由相關的信息
import Vue from 'vue'

// 導入組件
import VueRouter from 'vue-router';

// 路由懶加載
const Profile = () => import('../components/Profile')

// 1.通過Vue.use(插件)，安裝插件
Vue.use(VueRouter)

// 2.定義路由
const routes = [
  {
    path:'/profile',
    component:Profile
  }
]

// 3.創建router實例
const router = new VueRouter({
  // 配置路由和組件之間的應用關系
  routes,
  mode:'history',
  linkActiveClass: 'active'
})

// 4.導出router實例
export default router

App.vue

傳遞參數方式二: JavaScript代碼

App.vue

<template>
  <div id="app">
    <h2>中國大學mooc</h2>
    <button @click="userClick">用戶</button>
    <button @click="profileClick">檔案</button>
    <router-view></router-view>
    <h3>沒有圍牆的大學！！</h3>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        userId: 'guardwhy'
      }
    },
    methods: {
      userClick(){
        this.$router.push('/user/'+ this.userId)
      },
      profileClick(){
        this.$router.push({
          path: '/profile',
          query:{
            name: 'guardwhy',
            age : 28,
            height: 1.72
          }
        })
      }
    },
  }
</script>

<style>
  .active{
    color: red;
  }
</style>