1.介紹

Vue 很適合用來(lái)構(gòu)建單頁(yè)面應(yīng)用。對(duì)于大多數(shù)此類應(yīng)用，都推薦使用官方支持的Vue Router；在單頁(yè)面應(yīng)用(Single-page application）中，客戶端的 JavaScript 可以攔截頁(yè)面的跳轉(zhuǎn)請(qǐng)求，動(dòng)態(tài)獲取新的數(shù)據(jù)，然后在無(wú)需重新加載的情況下更新當(dāng)前頁(yè)面。這樣通?？梢詭?lái)更順滑的用戶體驗(yàn)，因?yàn)檫@類場(chǎng)景下用戶通常會(huì)在很長(zhǎng)的一段時(shí)間中做出多次交互。這類的單頁(yè)面應(yīng)用中，路由的更新是在客戶端執(zhí)行的。

Vue Router 是 Vue 的官方路由。它與 Vue.js 核心深度集成，讓用 Vue.js 構(gòu)建單頁(yè)應(yīng)用變得輕而易舉。功能包括：

• 嵌套路由映射
• 動(dòng)態(tài)路由選擇
• 模塊化、基于組件的路由配置
• 路由參數(shù)、查詢、通配符
• 展示由 Vue.js 的過(guò)渡系統(tǒng)提供的過(guò)渡效果
• 細(xì)致的導(dǎo)航控制
• 自動(dòng)激活 CSS 類的鏈接
• HTML5 history 模式或 hash 模式
• 可定制的滾動(dòng)行為
• URL 的正確編碼

我們來(lái)介紹Vue Router的基本使用。本文基于vue2以及vue-router@3.5.1編寫。

2.Vue Router的使用

2.1 安裝

對(duì)于vue2，我們推薦使用vue-router 3.x版本。若大于4.x，則部分功能無(wú)法在vue2中正常引入使用。

node環(huán)境安裝如下：

npm install vue-router@3.5.1

2.2 項(xiàng)目引入使用

在我們工程項(xiàng)目中，路由文件通常需要單獨(dú)管理，以便于后續(xù)的使用以及維護(hù)。再此基礎(chǔ)下，我們引入分為兩步：

• 創(chuàng)建統(tǒng)一管理路由入口文件
• vue項(xiàng)目引入使用路由入口文件

2.2.1 創(chuàng)建路由文件

在與main.ts文件的同級(jí)目錄下創(chuàng)建router文件夾，并添加index.ts文件（使用ts，若使用js也同理）。

文件內(nèi)容如下：

import Vue from "vue";
import VueRouter from "vue-router";
import routers from "./practice/practice";
import echartsRouters from './practice/echarts'

// 注冊(cè)vue-router中的所有組件
Vue.use(VueRouter);

const allRouter = [...routers, ...echartsRouters];
const router = new VueRouter({
  mode: "history",
  routes: allRouter
});

export default router;

Vue.use(VueRouter)是為了注冊(cè)所有組件，以方便全局使用，比如routerview等。

2.2.2 main.ts 引入

代碼如下：

import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

2.2.3 App.vue配置

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2.3 整體目錄結(jié)構(gòu)

├── public/                             # 靜態(tài)資源目錄
├── src/
│   ├── assets/                         # 全局資源目錄
│   │   ├── fonts/
│   │   └── images/
│   │
│   ├── components/                     # 全局組件
│   │   └── UserSelectTable/
│   │       ├── style/
│   │       │   ├── _var.scss
│   │       │   └── index.scss
│   │       ├── UserSelectTable.vue
│   │       └── index.ts
│   │
│   ├── store/                           # 狀態(tài)管理
│   │   ├── plugins/
│   │   │   ├── persist.ts
│   │   │   └── qiankun.ts
│   │   ├── modules/                     # 除非業(yè)務(wù)過(guò)于復(fù)雜，否者不推薦
│   │   │   ├── cart.ts
│   │   │   └── products.ts
│   │   ├── getters.ts                   # 根級(jí)別的 getters
│   │   ├── actions.ts                   # 根級(jí)別的 action
│   │   ├── mutations.ts                 # 根級(jí)別的 mutation
│   │   └── index.ts
│   │
│   ├── router/
│   │   ├── routes.ts                   # 路由配置
│   │   └── index.ts
│   │
│   ├── views/                          # 頁(yè)面級(jí)組件
│   │   ├── Home/
│   │   │   ├── components/             # 頁(yè)面級(jí)組件
│   │   │   ├── services/               # 頁(yè)面級(jí)組數(shù)據(jù)請(qǐng)求
│   │   │   │   └── repo.ts
│   │   │   └── Home.vue
│   │   │
│   │   └── About/
│   │       ├── components/
│   │       └──  About.vue
│   │
│   └── main.ts                         # 應(yīng)用入口
│
├── .browserslistrc
├── .env
├── .editorconfig
├── .eslintrc.js
├── .prettierrc
├── babel.config.js
├── vue.config.js
├── jsconfig.json                       
└── package.json

2.4 使用方法

router引入之后，我們可以通過(guò)router自帶的組件來(lái)進(jìn)行路由管理，以方便大型項(xiàng)目的路由訪問(wèn)以及統(tǒng)一管理。以下介紹常用的幾種用法。

2.4.1 使用router-view進(jìn)行頁(yè)面視圖切換

入之后我們單頁(yè)面應(yīng)用可以在app.vue配置使用router-view來(lái)切換頁(yè)面，并進(jìn)行嵌套路由配置。引入之后，在 Vue 實(shí)例中，你可以通過(guò) $router 訪問(wèn)路由實(shí)例，若想要導(dǎo)航到不同的 URL，使用this.$router.push(...)進(jìn)行跳轉(zhuǎn)。

嵌套路由案例如下：

	{
      path: '/user',
      component: User,
      children: [
        {
          // 當(dāng)訪問(wèn) /user/profile 時(shí)，
          // 頁(yè)面組件UserProfile 會(huì)被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 當(dāng)訪問(wèn) /user/posts 時(shí)
          // 頁(yè)面組件UserPosts 會(huì)被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }

詳細(xì)的router-view使用方法可見(jiàn)vue router-view使用詳解

2.4.2 使用router-link進(jìn)行頁(yè)面跳轉(zhuǎn)

當(dāng)使用 <router-link> 時(shí)，內(nèi)部會(huì)調(diào)用router.push(...)這個(gè)方法，所以點(diǎn)擊 <router-link :to="..."> 相當(dāng)于調(diào)用 router.push(...)

<router-link :to="{ name: 'user', params: { userId: '12345678' }}">User</router-link>

2.4.3 路由重定向

定義路由時(shí)添加redirect屬性，即可實(shí)現(xiàn)重定向，案例如下：

routes: [
    { path: '/a', redirect: '/b' }
  ]

該案例為，訪問(wèn)路由a時(shí)，會(huì)自動(dòng)重定向到b。做廢棄頁(yè)面改造時(shí)通常會(huì)非常有用

2.4.4 路由傳參

在頁(yè)面跳轉(zhuǎn)時(shí)，可以在push方法中添加參數(shù)，不同的路由訪問(wèn)方式，傳參方式不同；

• 使用path跳轉(zhuǎn)時(shí)，路由傳參通過(guò)query方式；
• 使用name跳轉(zhuǎn)時(shí)，路由傳參通過(guò)params’方式；

這里的path和name都是我們路由文件對(duì)應(yīng)的鍵值；如下：

 {
    path: "/productList",
    name: "productList",
    component: () => import("@/views/productList/index.vue")
  },

使用path和name路由傳參代碼如下：

path路由傳參

// path跳轉(zhuǎn)對(duì)應(yīng)query方式傳參
this.$router.push({
 path: '/routerJump',
  query: {
    name: 'sam', 
    stuNo: '1234'
  }
})

在下一個(gè)頁(yè)面取參：

// 使用query取參
this.stuNo = this.$route.query.stuNo；

name路由傳參

// // name跳轉(zhuǎn)對(duì)應(yīng)params方式傳參
this.$router.push({
 name: 'routerJump',
  params: {
    name: 'sam', 
    stuNo: '1234'
  }
})

在下一個(gè)頁(yè)面取參:

// 使用params取參
this.stuNo = this.$route.params.stuNo；

注意，取參的時(shí)候使用的$route中的route是沒(méi)有“r”的。

2.4.5 路由守衛(wèi)

1、路由加載前置守衛(wèi)：router.beforeEach

router.beforeEach((to, from, next) => {
  // ...
})

每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：

to: Route: 即將要進(jìn)入的目標(biāo)路由

from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由

next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

• next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)。
• next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶手動(dòng)或者瀏覽器后退按鈕)，那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。
• next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。你可以向 next 傳遞任意位置對(duì)象，且允許設(shè)置諸如 replace: true、name: 'home' 之類的選項(xiàng)以及任何用在 router-link 的 to prop 或 router.push 中的選項(xiàng)。
• next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給 router.onError() 注冊(cè)過(guò)的回調(diào)。

確保 next 函數(shù)在任何給定的導(dǎo)航守衛(wèi)中都被嚴(yán)格調(diào)用一次。它可以出現(xiàn)多于一次，但是只能在所有的邏輯路徑都不

重疊的情況下，否則鉤子永遠(yuǎn)都不會(huì)被解析或報(bào)錯(cuò)。

使用案例：登錄認(rèn)證成功跳轉(zhuǎn)，否則不跳轉(zhuǎn)：

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

2、路由跳轉(zhuǎn)后置鉤子

對(duì)于后置鉤子和守衛(wèi)不同的是，這些鉤子不會(huì)接受 next 函數(shù)也不會(huì)改變導(dǎo)航本身：

router.afterEach((to, from) => {
  // ...
})

3、 組件內(nèi)的守衛(wèi)

在實(shí)際情況下，我們使用組件內(nèi)守衛(wèi)較多，在路由組件內(nèi)直接定義以下路由導(dǎo)航守衛(wèi)：

• beforeRouteEnter
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave

要注意此時(shí)生命周期對(duì)this的訪問(wèn)以及處理，具體使用如下：

  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
    // 不！能！獲取組件實(shí)例 `this`
    // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒(méi)被創(chuàng)建
  },
  beforeRouteUpdate(to, from, next) {
    // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
    // 舉例來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
    // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
    // 可以訪問(wèn)組件實(shí)例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用
    // 可以訪問(wèn)組件實(shí)例 `this`
  }

3.其他

本文介紹的是在實(shí)際開(kāi)發(fā)中使用較多的Vue Router內(nèi)置組件，用好這些組件，往往能夠使得一些復(fù)雜的問(wèn)題簡(jiǎn)單化，使得項(xiàng)目開(kāi)發(fā)得心應(yīng)手。另本文參考官網(wǎng)進(jìn)行vue2路由配置實(shí)際操作，更加全面的使用請(qǐng)參考官網(wǎng)vue router。

以上就是vue2中vue-router引入使用詳解的詳細(xì)內(nèi)容，更多關(guān)于vue2 vue-router的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論