vue-router 路由嵌套显示不出来_45. Vue路由vuerouter的基本使用
前言
在使用vue-router之前，首先要認識一下前端路由和后端路由的區(qū)別概念。
什么是路由
「后端路由」:對于普通的網(wǎng)站，所有的超鏈接都是URL地址，所有的URL地址都對應服務器上對應的資源；
例如：https://www.ximalaya.com/my/subscribed/
「前端路由」:對于單頁面應用程序來說，主要通過URL中的hash(#號)來實現(xiàn)不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關(guān)的內(nèi)容；所以，單頁面程序中的頁面跳轉(zhuǎn)主要用hash實現(xiàn)；
例如：https://www.ximalaya.com#/my/subscribed/ ，注意請求路由前面帶上了hash(#號)
在單頁面應用程序中，這種通過hash改變來切換頁面的方式，稱作前端路由(區(qū)別于后端路由)；
安裝使用vue-router
想要知道如何安裝使用vue-router，那么肯定要知道哪里查看官方文檔。
vue-router官方文檔：https://router.vuejs.org/zh/
vue-router安裝文檔：https://router.vuejs.org/zh/installation.html
根據(jù)文檔，安裝vue-router有以下三種方式。
直接下載 / CDN
https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com 提供了基于 NPM 的 CDN 鏈接。上面的鏈接會一直指向在 NPM 發(fā)布的最新版本。你也可以像 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 標簽，則無須如此 (手動安裝)。
構(gòu)建開發(fā)版
如果你想使用最新的開發(fā)版，就得從 GitHub 上直接 clone，然后自己 build 一個 vue-router。
git clone https://github.com/vuejs/vue-router.git node_modules/vue-routercd node_modules/vue-router
npm install
npm run build
vue-router的基本使用
上面提供了三種安裝方式，我采用第一種方式進行安裝以及使用演示。
用 Vue.js + Vue Router 創(chuàng)建單頁應用，是非常簡單的。使用 Vue.js ，我們已經(jīng)可以通過組合組件來組成應用程序，當你要把 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-202002172311383912.按照順序?qū)雟ue.js 以及vue-router.js庫
<script src="lib/vue.js">script>
<script src="lib/vue-router.js">script>
當導入了vue-router.js庫之后，打開瀏覽器就會發(fā)現(xiàn)url的路徑增加了#號，如下：
image-202002181731118093.創(chuàng)建兩個組件，后續(xù)用來設置前端路由進行組件展示切換
創(chuàng)建一個登陸以及注冊的組件，如下：
<script> // 創(chuàng)建登陸組件loginvar login = {template: "登陸組件
",}// 創(chuàng)建注冊組件registervar register = {template: "
注冊組件
",}// 創(chuàng)建vue的實例var vm = new Vue({el: '#app',data: {},methods:{}, // 注冊局部組件，注意：下面使用vue-router的話，不需要在這里注冊組件components:{}
})script>
4.創(chuàng)建Vue-Router的路由對象，用來設置組件與前端路由的規(guī)則
image-20200218164603840image-20200218164632177 <script> // 1. 定義 (路由) 組件。// 可以從其他文件 import 進來// 創(chuàng)建登陸組件loginvar login = {template: "登陸組件
",}// 創(chuàng)建注冊組件registervar register = {template: "
注冊組件
",}// 2. 定義路由// 每個路由應該映射一個組件。 其中"component" 可以是// 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器，// 或者，只是一個組件配置對象。var routes = [
{ path: '/login', component: login },
{ path: '/register', component: register }
]// 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。var router = new VueRouter({
routes // (縮寫) 相當于 routes: routes
})// 創(chuàng)建vue的實例var vm = new Vue({el: '#app',data: {},methods:{}, // 注冊局部組件，注意：下面使用vue-router的話，不需要在這里注冊組件components:{},// 將路由規(guī)則對象，注冊到 vm 實例上，用來監(jiān)聽 URL 地址的變化，然后展示對應的組件router: router,
})script>
到這里已經(jīng)寫好了路由組件的相關(guān)內(nèi)容了，那么下面就來看看如何在app中使用。
5.在主組件app中使用router-view展示路由組件
<div id="app"><router-view>router-view>
div>
那么上面寫了這個router-view的標簽有什么作用呢？下面來設置#路由來看看效果。
- 訪問#/login
- 訪問#/register
好了，寫到這里可以看到根據(jù)不同的哈希路由，就可以展示不同的組件內(nèi)容。
6.寫兩個a標簽用來切換組件
上面是直接在瀏覽器上修改url地址的hash路徑，下面寫兩個a標簽來設置。
image-20200218201215538按照我們已經(jīng)開發(fā)習慣，a標簽的鏈接基本設置為/login 和 /register，那么下面打開瀏覽器看看，能否正常跳轉(zhuǎn)組件，如下：
image-20200218201743334image-20200218201801950可以看到在a標簽直接設置跳轉(zhuǎn)/login是無法正常前端跳轉(zhuǎn)的。因為/login沒有帶#是不能訪問到的。
給兩個請求路徑增加#，如下：
image-20200218202155774打開瀏覽器點擊a標簽，如下：
image-20200218202229944image-20200218202253857此時能夠正常顯示路由對應的組件了。但是，難道每次設置鏈接的時候都要寫一個#號嗎？ 感覺挺麻煩的。有沒有更好的寫法呢？
當然有，下面來介紹一下router-link的使用。
router-link 的基本使用
為了不用像上面那些寫a標簽的跳轉(zhuǎn)鏈接加上一個#號，vue框架提供了一個超鏈接標簽router-link，怎么用？下面來看看。
「7.寫兩個router-link實現(xiàn)a標簽的跳轉(zhuǎn)功能」
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設置跳轉(zhuǎn)的路徑并不需要寫一個#號在前面。
打開瀏覽器查看一下效果，如下：
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也是可以跳轉(zhuǎn)組件的，如下：
image-20200218221244625說明router-link不管被渲染為什么html標簽，都具有跳轉(zhuǎn)頁面的效果。
重定向rediect的使用
「1.存在的根路徑問題」
image-20200219213738063那么能不能讓訪問 #/ 路徑的時候，直接訪問「登陸」組件的內(nèi)容呢？
2.設置/路徑顯示登陸組件
image-20200219214750591這樣通過設置兩個path路徑指向組件login, 那么則可以顯示登陸組件的內(nèi)容，如下：
image-20200219214856648這樣寫雖然可以顯示登陸組件，但是兩個路徑去指向的話，感覺就不太好。那么此時就要使用路徑重定向的功能了。
3.使用rediect設置重定向
image-20200219215359109{ path: '/', redirect: '/login' },瀏覽器當訪問/路徑的時候，自動跳至/login，如下：
image-20200219215725782當按下回車，訪問路徑，如下：
image-20200219215800568router-link設置高亮顯示
在日常的菜單中，一般都會對選中的菜單設置高亮的效果，表示已經(jīng)選中了這個菜單，那么在router-link中該如何設置這個效果呢？
首先來看看router-link選中之后，會有什么東西？
image-20200219223221790可以看到，當被點擊選中過，就會自動設置一個class為router-link-exact-active router-link-active, 那么就可以通過這設置的類來寫樣式，用來體現(xiàn)高亮的效果。
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的定義
訪問官網(wǎng)查看：https://router.vuejs.org/zh/api/#tag
active-class
類型: string
默認值: "router-link-active"
設置鏈接激活時使用的 CSS 類名。默認值可以通過路由的構(gòu)造選項 linkActiveClass 來全局配置。
3.自定義選中的class類
從上面的定義看出了可以通過路由的構(gòu)造選項linkActiveClass來進行配置，如下：
image-20200219225026594 // 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。
var router = new VueRouter({
routes, // (縮寫) 相當于 routes: routes
linkActiveClass: "myactive", // 自定義選中的class
})
在上面設置好了選中的自定義class為myactive，打開瀏覽器確認如下：
image-20200219225124102可以看到顯示為 myactive
4.設置自定義的class類樣式效果
image-20200219225242125瀏覽器顯示效果如下：
image-20200219225303369可以看到已經(jīng)達到自定義class的選中樣式效果了。
為路由切換增加動畫效果
上面已經(jīng)寫好了路由的基本使用，那么現(xiàn)在再來一個動畫效果。
1.使用transition包括router-view，并且設置動畫的mode為out-in
image-202002192302405112.設置動畫的樣式
image-202002192303084943.瀏覽器顯示的效果
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 進來// 創(chuàng)建登陸組件loginvar login = {template: "
登陸組件
",}// 創(chuàng)建注冊組件registervar register = {template: "
注冊組件
",}// 2. 定義路由// 每個路由應該映射一個組件。 其中"component" 可以是// 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器，// 或者，只是一個組件配置對象。// 我們晚點再討論嵌套路由。var routes = [// { path: '/', component: login },
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
]// 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。var router = new VueRouter({
routes, // (縮寫) 相當于 routes: routeslinkActiveClass: "myactive", // 自定義選中的class
})// 創(chuàng)建vue的實例var vm = new Vue({el: '#app',data: {},methods:{}, // 注冊局部組件，注意：下面使用vue-router的話，不需要在這里注冊組件components:{},// 將路由規(guī)則對象，注冊到 vm 實例上，用來監(jiān)聽 URL 地址的變化，然后展示對應的組件
router, // 等價于 router: router
})script>
body>
html>
交流QQ群：
點擊下面，查看更多Vue系列文章
總結(jié)
以上是生活随笔為你收集整理的vue-router 路由嵌套显示不出来_45. Vue路由vuerouter的基本使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL笔记-group by和聚合函
- 下一篇： vue项目路径修改及打包上传到服务器