前言

在使用vue-router之前，首先要認識一下前端路由和后端路由的區別概念。

什么是路由

「后端路由」:對于普通的網站，所有的超鏈接都是URL地址，所有的URL地址都對應服務器上對應的資源；

例如：https://www.ximalaya.com/my/subscribed/

「前端路由」:對于單頁面應用程序來說，主要通過URL中的hash(#號)來實現不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關的內容；所以，單頁面程序中的頁面跳轉主要用hash實現；

例如：https://www.ximalaya.com#/my/subscribed/ ，注意請求路由前面帶上了hash(#號)

在單頁面應用程序中，這種通過hash改變來切換頁面的方式，稱作前端路由(區別于后端路由)；

安裝使用vue-router

想要知道如何安裝使用vue-router，那么肯定要知道哪里查看官方文檔。

vue-router官方文檔：https://router.vuejs.org/zh/

vue-router安裝文檔：https://router.vuejs.org/zh/installation.html

根據文檔，安裝vue-router有以下三種方式。

直接下載 / CDN

https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com 提供了基于 NPM 的 CDN 鏈接。上面的鏈接會一直指向在 NPM 發布的最新版本。你也可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 這樣指定 版本號 或者 Tag。

在 Vue 后面加載 vue-router，它會自動安裝的：

<script src="/path/to/vue.js">script>
<script src="/path/to/vue-router.js">script>

NPM

npm install vue-router

如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

如果使用全局的 script 標簽，則無須如此 (手動安裝)。

構建開發版

如果你想使用最新的開發版，就得從 GitHub 上直接 clone，然后自己 build 一個 vue-router。

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

vue-router的基本使用

上面提供了三種安裝方式，我采用第一種方式進行安裝以及使用演示。

用 Vue.js + Vue Router 創建單頁應用，是非常簡單的。使用 Vue.js ，我們已經可以通過組合組件來組成應用程序，當你要把 Vue Router 添加進來，我們需要做的是，將組件 (components) 映射到路由 (routes)，然后告訴 Vue Router 在哪里渲染它們。下面是個基本例子：

1.直接下載 vue-router.js 文件到本地

在瀏覽器訪問 https://unpkg.com/vue-router/dist/vue-router.js

image-20200217230732421

將下載的vue-router.js 放入項目本地文件夾下：

image-20200217231138391

2.按照順序導入vue.js 以及vue-router.js庫

<script src="lib/vue.js">script>

<script src="lib/vue-router.js">script>

當導入了vue-router.js庫之后，打開瀏覽器就會發現url的路徑增加了#號，如下：

image-20200218173111809

3.創建兩個組件，后續用來設置前端路由進行組件展示切換

創建一個登陸以及注冊的組件，如下：

<script> // 創建登陸組件loginvar login = {template: "

登陸組件

",
}// 創建注冊組件registervar register = {template: "

注冊組件

",
}// 創建vue的實例var vm = new Vue({el: '#app',data: {},methods:{}, // 注冊局部組件，注意：下面使用vue-router的話，不需要在這里注冊組件components:{}
})script>

4.創建Vue-Router的路由對象，用來設置組件與前端路由的規則

image-20200218164603840image-20200218164632177 <script> // 1. 定義 (路由) 組件。// 可以從其他文件 import 進來// 創建登陸組件loginvar login = {template: "

登陸組件

",
}// 創建注冊組件registervar register = {template: "

注冊組件

",
}// 2. 定義路由// 每個路由應該映射一個組件。 其中"component" 可以是// 通過 Vue.extend() 創建的組件構造器，// 或者，只是一個組件配置對象。var routes = [
{ path: '/login', component: login },
{ path: '/register', component: register }
]// 3. 創建 router 實例，然后傳 `routes` 配置// 你還可以傳別的配置參數, 不過先這么簡單著吧。var router = new VueRouter({
routes // (縮寫) 相當于 routes: routes
})// 創建vue的實例var vm = new Vue({el: '#app',data: {},methods:{}, // 注冊局部組件，注意：下面使用vue-router的話，不需要在這里注冊組件components:{},// 將路由規則對象，注冊到 vm 實例上，用來監聽 URL 地址的變化，然后展示對應的組件router: router,
})script>

到這里已經寫好了路由組件的相關內容了，那么下面就來看看如何在app中使用。

5.在主組件app中使用router-view展示路由組件

<div id="app">



<router-view>router-view>

div>

那么上面寫了這個router-view的標簽有什么作用呢？下面來設置#路由來看看效果。

• 訪問#/login

image-20200218181306479

• 訪問#/register

image-20200218181330070

好了，寫到這里可以看到根據不同的哈希路由，就可以展示不同的組件內容。

6.寫兩個a標簽用來切換組件

上面是直接在瀏覽器上修改url地址的hash路徑，下面寫兩個a標簽來設置。

image-20200218201215538

按照我們已經開發習慣，a標簽的鏈接基本設置為/login 和 /register，那么下面打開瀏覽器看看，能否正常跳轉組件，如下：

image-20200218201743334image-20200218201801950

可以看到在a標簽直接設置跳轉/login是無法正常前端跳轉的。因為/login沒有帶#是不能訪問到的。

給兩個請求路徑增加#，如下：

image-20200218202155774

打開瀏覽器點擊a標簽，如下：

image-20200218202229944image-20200218202253857

此時能夠正常顯示路由對應的組件了。但是，難道每次設置鏈接的時候都要寫一個#號嗎？ 感覺挺麻煩的。有沒有更好的寫法呢？

當然有，下面來介紹一下router-link的使用。

router-link 的基本使用

為了不用像上面那些寫a標簽的跳轉鏈接加上一個#號，vue框架提供了一個超鏈接標簽router-link，怎么用？下面來看看。

「7.寫兩個router-link實現a標簽的跳轉功能」

image-20200218213154341 <div id="app">

<a href="#/login">登陸a>
<a href="#/register">注冊a>

<hr>

<router-link to="/login">登陸router-link>
<router-link to="/register">注冊router-link>



<router-view>router-view>

div>

可以看到router-link設置跳轉的路徑并不需要寫一個#號在前面。

打開瀏覽器查看一下效果，如下：

image-20200218213411568

可以從上面看到router-link默認會自動渲染為a標簽，那么如果不想渲染為a標簽，能否渲染為其他html標簽呢？這個是可以的。

8.將router-link使用tag屬性渲染為span標簽

image-20200218215935565

打開瀏覽器查看如下：

image-20200218220157626

可以看到渲染為了一個span標簽，那么能否點擊切換組件呢？

當點擊注冊，則會跳至對應的組件，并且自動設置選中的class類router-link-exact-active router-link-active，而這種類其實就是可以用來做一下選中的樣式變化的，這里先不深入。

image-20200218220415250

那么下面點擊登陸這個span也是可以跳轉組件的，如下：

image-20200218221244625

說明router-link不管被渲染為什么html標簽，都具有跳轉頁面的效果。

重定向rediect的使用

「1.存在的根路徑問題」

image-20200219213738063

那么能不能讓訪問 #/ 路徑的時候，直接訪問「登陸」組件的內容呢？

2.設置/路徑顯示登陸組件

image-20200219214750591

這樣通過設置兩個path路徑指向組件login, 那么則可以顯示登陸組件的內容，如下：

image-20200219214856648

這樣寫雖然可以顯示登陸組件，但是兩個路徑去指向的話，感覺就不太好。那么此時就要使用路徑重定向的功能了。

3.使用rediect設置重定向

image-20200219215359109{ path: '/', redirect: '/login' },

瀏覽器當訪問/路徑的時候，自動跳至/login，如下：

image-20200219215725782

當按下回車，訪問路徑，如下：

image-20200219215800568

router-link設置高亮顯示

在日常的菜單中，一般都會對選中的菜單設置高亮的效果，表示已經選中了這個菜單，那么在router-link中該如何設置這個效果呢？

首先來看看router-link選中之后，會有什么東西？

image-20200219223221790

可以看到，當被點擊選中過，就會自動設置一個class為router-link-exact-active router-link-active, 那么就可以通過這設置的類來寫樣式，用來體現高亮的效果。

1.給router-link-active類設置選中的樣式

image-20200219224121746 <style>.router-link-active{color: #0056B3;font-weight: 700;text-decoration: none;
}style>

在瀏覽器顯示如下：

image-20200219224212556image-20200219224236755

可以從上面看到，通過設置router-link-active類樣式，達到選中效果的變化，那么能不能自定義一個類名呢？

當然是可以的，默認情況下就是router-link-active，下面來看看如何自定義。

2.查看選中active-class的定義

訪問官網查看：https://router.vuejs.org/zh/api/#tag

active-class

• 類型: string

• 默認值: "router-link-active"

  設置鏈接激活時使用的 CSS 類名。默認值可以通過路由的構造選項 linkActiveClass 來全局配置。

3.自定義選中的class類

從上面的定義看出了可以通過路由的構造選項linkActiveClass來進行配置，如下：

image-20200219225026594 // 3. 創建 router 實例，然后傳 `routes` 配置
// 你還可以傳別的配置參數, 不過先這么簡單著吧。
var router = new VueRouter({
routes, // (縮寫) 相當于 routes: routes
linkActiveClass: "myactive", // 自定義選中的class
})

在上面設置好了選中的自定義class為myactive，打開瀏覽器確認如下：

image-20200219225124102

可以看到顯示為 myactive

4.設置自定義的class類樣式效果

image-20200219225242125

瀏覽器顯示效果如下：

image-20200219225303369

可以看到已經達到自定義class的選中樣式效果了。

為路由切換增加動畫效果

上面已經寫好了路由的基本使用，那么現在再來一個動畫效果。

1.使用transition包括router-view，并且設置動畫的mode為out-in

image-20200219230240511

2.設置動畫的樣式

image-20200219230308494

3.瀏覽器顯示的效果

image-20200219230342138

可以看到組件先out，后in的效果。

完成的實例代碼

span style="line-height: 26px;">html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>

<script src="lib/vue.js">script>

<script src="lib/vue-router.js">script>
<style>.router-link-active,.myactive{color: #0056B3;font-weight: 700;text-decoration: none;
}/* 設置動畫效果 */.v-enter,.v-leave-to{opacity: 0;transform: translateX(9.375rem);
}.v-enter-active, .v-leave-active{transition: all 1s ease;
}style>
head>
<body>

<div id="app">

<a href="#/login">登陸a>
<a href="#/register">注冊a>

<hr>

<router-link to="/login" tag="span">登陸router-link>
<router-link to="/register">注冊router-link>



<transition mode="out-in">
<router-view>router-view>
transition>

div>

<script> // 1. 定義 (路由) 組件。// 可以從其他文件 import 進來// 創建登陸組件loginvar login = {template: "

登陸組件

",
}// 創建注冊組件registervar register = {template: "

注冊組件

",
}// 2. 定義路由// 每個路由應該映射一個組件。 其中"component" 可以是// 通過 Vue.extend() 創建的組件構造器，// 或者，只是一個組件配置對象。// 我們晚點再討論嵌套路由。var routes = [// { path: '/', component: login },
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
]// 3. 創建 router 實例，然后傳 `routes` 配置// 你還可以傳別的配置參數, 不過先這么簡單著吧。var router = new VueRouter({
routes, // (縮寫) 相當于 routes: routeslinkActiveClass: "myactive", // 自定義選中的class
})// 創建vue的實例var vm = new Vue({el: '#app',data: {},methods:{}, // 注冊局部組件，注意：下面使用vue-router的話，不需要在這里注冊組件components:{},// 將路由規則對象，注冊到 vm 實例上，用來監聽 URL 地址的變化，然后展示對應的組件
router, // 等價于 router: router
})script>

body>
html>

交流QQ群：

點擊下面，查看更多Vue系列文章

總結

以上是生活随笔為你收集整理的vue-router 路由嵌套显示不出来_45. Vue路由vuerouter的基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。