第十五節：VueRouter4.x用法之router-link/router-view的v-slot、動態增刪路由、路由導航守衛

一. router-link的v-slot

（需要復習一下插槽的相關用法：https://www.cnblogs.com/yaopengfei/p/15338752.html） 

 

 

 

二. router-view的v-slot

 了解即可

 

 

三. 動態增刪路由

1. 添加路由

(1). 添加1級路由

　使用addRoute方法，直接添加即可

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
const router = createRouter({
    history: createWebHistory(),
    routes
})

// 動態添加1級路由
const Test1Router = {
    path: '/test1',
    name: 'test1',
    component: () => import('../views/Test1.vue'),
}
router.addRoute(Test1Router);

(2). 添加2級路由

　使用addRoute方法，第一個參數傳入父級路由的名稱。

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
// 動態添加2級路由
const Test2Router = {
    path: 'test2', //特別注意這里的test2之前不寫/, 自動就給加上了
    component: () => import('../views/Test2.vue'),
}
// 第一個參數要寫對應父級路由的名字，即name屬性
router.addRoute('Home', Test2Router);

2. 刪除路由 

方式一：添加一個name相同的路由進行覆蓋；

方式二：通過removeRoute方法，傳入路由的名稱，即name屬性；

方式三：通過addRoute方法的返回值回調實現刪除；

PS： 補充其它方法

 

 

四. 路由導航守衛

 （詳細的導航守衛見官網：https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#導航守衛， 本節重點介紹全局前置守衛 beforeEash）

1. 前置守衛

　使用 router.beforeEach 注冊一個全局前置守衛，可以理解 跳轉到每個路由之前，都有經過這個守衛。

(1). 兩個參數：

　to：即將進入的路由Route對象；

　from：即將離開的路由Route對象；

(2). 返回值：

　A. false：取消當前導航，直接截斷，不跳轉；

　B. 不返回或者undefined：進行默認導航；（相當於以前的 next()    里面什么參數不寫）

　C. 返回一個路由地址：

　　a. 可以是一個string類型的路徑；

　　b. 可以是一個對象，對象中包含path、query、params等信息； router.push({path: "/login", query: ....})

注：可選的第三個參數：next，在Vue2中我們是通過next函數來決定如何進行跳轉的；但是在Vue3中我們是通過返回值來控制的，不再推薦使用next函數，這是因為開發中很容易調用多次next；

2. 案例 

 　我們要做一套業務，必須登錄后才能看見其它頁面，簡單模擬一下即可。

// 登錄守衛
// (說明：只有經過登錄頁面以后，才允許訪問其它頁面，否則統一退回到登陸頁)
/**
 * 參數：
 *       to: Route對象, 即將跳轉到的Route對象
 *       from: Route對象, 
 * 返回值問題:
 *    1.false: 不進行導航
 *    2.undefined或者不寫返回值: 進行默認導航
 *    3.字符串: 路徑, 跳轉到對應的路徑中
 *    4.對象: 類似於 router.push({path: "/login", query: ....})
 */
router.beforeEach((to, from) => {
    // console.log(to, from);
    if (to.path !== '/login') {
        var myToken = window.localStorage.getItem('myToken');
        if (!myToken) {
            return '/login';
        }
    }
});

 

 

 

 

 

 

 

!

• 作       者 : Yaopengfei(姚鵬飛)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 聲     明1 : 如有錯誤，歡迎討論，請勿謾罵^_^。
• 聲     明2 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址，否則保留追究法律責任的權利。