Vue路由（Vue-router）

1.1 路由

2. 前端路由

概念：根據(jù)不同的用戶事件蕴潦，顯示不同的頁面內(nèi)容

本質(zhì)：用戶事件與事件處理函數(shù)之間的對應(yīng)關(guān)系

3. 實現(xiàn)簡易前端路由

基于URL中的hash實現(xiàn)（點擊菜單的時候改變URL的hash烤低，根據(jù)hash的變化控制組件的切換）

Vue Router（官網(wǎng)：https://router.vuejs.org/zh/）是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成小腊，可以非常方便的用于SPA應(yīng)用程序的開發(fā)。

Vue Router 包含的功能有：

支持HTML5 歷史模式或 hash 模式

支持嵌套路由

支持路由參數(shù)

支持編程式路由

支持命名路由

3. vue-router的基本使用

1. 基本使用步驟

1. 引入相關(guān)的庫文件?<script?src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2. 添加路由鏈接

<router-link?to="/user">User</router-link>

<router-link?to="/register">Register</router-link>

3. 添加路由填充位

<router-view></router-view>

4. 定義路由組件

5. 配置路由規(guī)則并創(chuàng)建路由實例

6. 把路由掛載到 Vue 根實例中

4.路由重定向

路由重定向指的是：用戶在訪問地址 A 的時候，強(qiáng)制用戶跳轉(zhuǎn)到地址 C 参滴，從而展示特定的組件頁面强岸；通過路由規(guī)則的 redirect 屬性，指定一個新的路由地址砾赔，可以很方便地設(shè)置路由的重定向：

6.vue-router嵌套路由

1. 嵌套路由用法

1.1. 嵌套路由功能分析

點擊父級路由鏈接顯示模板內(nèi)容

模板內(nèi)容中又有子級路由鏈接

點擊子級路由鏈接顯示子級模板內(nèi)容

效果圖：

2. 父路由組件模板

父級路由鏈接

父組件路由填充位

3. 子級路由模板

子級路由鏈接

子級路由填充位

4. 嵌套路由配置

父級路由通過children屬性配置子級路由

7.動態(tài)匹配路由的基本用法

應(yīng)用場景：通過動態(tài)路由參數(shù)的模式進(jìn)行路由匹配

8.vue-router編程式導(dǎo)航

1. 頁面導(dǎo)航的兩種方式

聲明式導(dǎo)航：通過點擊鏈接實現(xiàn)導(dǎo)航的方式蝌箍，叫做聲明式導(dǎo)航例如：普通網(wǎng)頁中的<a>鏈接或 vue 中的 <router-link></router-link>

編程式導(dǎo)航：通過調(diào)用JavaScript形式的API實現(xiàn)導(dǎo)航的方式青灼，叫做編程式導(dǎo)航例如：普通網(wǎng)頁中的 location.href?

2. 編程式導(dǎo)航基本用法

常用的編程式導(dǎo)航 API 如下：

this.$router.push('hash地址')

this.$router.go(n)

路由導(dǎo)航守衛(wèi)

例如登錄：我們不希望在未登錄時(就是沒有當(dāng)前用戶的token)就可以訪問其他頁面

使用router.beforeEach()

創(chuàng)建router對象

const router = new VueRouter();

// 掛載路由導(dǎo)航守衛(wèi)

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

// to 將要訪問的路徑

// from 代表從哪個路徑跳轉(zhuǎn)而來

// next 是一個函數(shù),表示放行

// next() 放行 next('/login') 強(qiáng)制跳轉(zhuǎn)

// 判斷用戶訪問的是否是登錄頁

if?(to.path?===?'/login')?return?next()

// 獲取token

const?tokenStr?=?window.sessionStorage.getItem('token')

if?(!tokenStr)?return?next('/login')

next()

})

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者