Vue3-Bear-Admin 路由指南

基本概念

路由导航（Routing Navigation）是管理和切换应用程序页面的过程。

路由基础

路由记录 (Router Record)：我们称呼 routes 配置中的每个路由对象为路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，它可能匹配多个路由记录。
路由器 (Router): 路由器是一个 Vue 插件，它管理应用的所有路由，通过createRouter({...});创建一个路由器实例，并配置你的路由。
路由 (Routes): 路由定义了 URL 路径与组件之间的映射关系。当用户访问特定 URL 时，路由器会渲染相应的组件。
路由视图 (Router View): <router-view> 是一个占位符组件，路由器会在其中渲染匹配的组件。
路由链接 (Router Link): <router-link> 是一个用于创建导航链接的组件，它会生成一个包含正确 href 属性的 <a> 标签。

配置 Vue Router

安装 Vue Router:
1

npm install vue-router

创建路由配置: 在 src/router/index.js 中配置路由：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

在 Vue 应用中使用路由器: 在 src/main.js 中导入并使用路由器：

1
2
3
4
5
6
7


import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

使用路由组件

创建组件: 在 src/views 目录中创建 Home.vue 和 About.vue 文件，定义组件内容。

使用 <router-view> 渲染路由匹配的组件: 在 src/App.vue 中添加 <router-view>：

1
2
3
4
5
6
7


<template>
    <div id="app">
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
        <router-view></router-view>
    </div>
</template>

导航守卫

Vue Router 提供了一些钩子函数，可以在导航发生前、导航中、导航后进行一些操作，比如权限验证、数据加载等。

全局守卫:

1
2
3
4


router.beforeEach((to, from, next) => {
    // 逻辑操作
    next();
});

路由独享守卫:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


const routes = [
    {
        path: '/about',
        component: About,
        beforeEnter: (to, from, next) => {
            // 逻辑操作
            next();
        }
    }
];

组件内守卫:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


export default {
    beforeRouteEnter(to, from, next) {
        // 逻辑操作
        next();
    },
    beforeRouteUpdate(to, from, next) {
        // 逻辑操作
        next();
    },
    beforeRouteLeave(to, from, next) {
        // 逻辑操作
        next();
    }
}

通过以上步骤，可以在 Vue 项目中实现基本的路由导航功能。

Vue Router API

全局前置守卫

全局前置守卫API
入参

NavigationGuardWithThis

官方文档不推荐使用`next`方法

更多信息参考：Vue Router next方法平替

公共路由定义

定义用户都会有的公共页面的路由。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


// src/router/index.ts
const Layout = () => import("@/layout/index.vue");

const publicRoutes = [
  {
    path: '/',
    name: 'home',
    component: Layout,
    redirect: '/home',
    children: [
      {
        path: '/home',    // 捕获所有路由或 404 Not found 路由
        component: () => import('@/views/home/index.vue')
      }
    ]
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/error-page/404.vue')
  },
  {
    path: '/403',
    name: '403',
    component: () => import('@/views/error-page/403.vue')
  },
  {path: '/login', name: 'login', component: ()=> import('@/views/login/index.vue')},
]

创建路由

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// src/router/index.ts
/**
 * 创建路由
 */
const router = createRouter({
  history: createWebHashHistory(),
  routes: publicRoutes,
  // 刷新时，滚动条位置还原
  scrollBehavior: () => ({ left: 0, top: 0 }),
});


export default router

全局注册路由实例

1
2


import router from '@/router'
app.use(router)