vue-router 使用

全家桶的引入

 "dependencies": {
    "naive-ui": "^2.31.0", // 一个你喜欢的 vueUI 组件库 (尤大推荐)
    "axios": "^0.27.2", // 网络请求
    "dayjs": "^1.11.3", // 时间插件
    "pinia": "^2.0.14", // 状态管理 用 ts 之后你就会知道 vuex 的整体使用没有 pinia 好
    "qs": "^6.11.0", // 格式化转换
    "vue": "^3.2.25", // vue
    "vue-router": "^4.0.16" // 路由管理
  }

1
2
3
4
5
6
7
8
9

├── src  // 源码目录
│   ├── App.vue // 入口文件
│   ├── assets // 公共资源
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts // 入口文件，加载公共组件

1
2
3
4
5
6
7

修改入口文件 src/main

模版中自带

typescript

import { createApp } from 'vue' // vue 的创建
import './style.css' // 公共的 css
import App from './App.vue' // 主要App

createApp(App).mount('#app') // 挂载至 app 的 dom 上

1
2
3
4
5

开始进行修改，通常的写法是

typescript

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

const app = createApp(App)

app.use(router)
app.mount('#app')

1
2
3
4
5
6
7
8

这样的话，把 app 作为一个实例，然后启动，这样有什么不好呢？这样会导致整个项目的结构，直接引入当我想删除一个的时候，需要找一会，项目的逻辑，最好的还是单一原则。

所以我的建议是这样写

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

function setupApp() {
    // webpack 思想的精髓是什么，是插件思维你可以做成一个，这样就可以直接
    setupRouter(app)

    //  setupXXX 未来可以有更多的插件加入
    // ....
    app.mount('#app')
}

setupApp()

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

加入 router

新建页面

首先在 src 目录下，新建一个 views 目录，在目录中的都是页面。vue

新建 About.vue、与 Home.vue

<template>
  <div>About</div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

1
2
3
4
5
6
7

修改 App.vue

html

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

1
2
3
4
5
6
7
8

新增 router 路由设置

在 src 目录下，新建一个 router 的目录，下面放一个 index.ts

import { App } from 'vue'
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'

// routes 的路由路径,在后续的设计中，也可以作为外部引入的方法去做设计
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        meta: { hidden: true }, // 配置元素
        component: () => import('../views/About.vue')
    }
]

// 创建一个 router 实例
const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes
})

// 导出安装
export async function setupRouter(app: App): Promise<void> {
    app.use(router)
}

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
29

路由守卫者的封装

在外部写入 beforeHooks、afterHooks.ts

/**
 * 之前路由守卫
 */
Object.values(beforeHooks).forEach((hook) => {
  router.beforeEach(hook)
})

/**
 * 之后路由守卫
 */
Object.values(afterHooks).forEach((hook) => {
  router.afterEach(hook)
})

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

未来的设计中可以使用 beforeHooks.ts

import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router'

// 路由这里可以写登录的权限
const loginPermission = async (
  to: RouteLocationNormalized,
  from: RouteLocationNormalized,
  next: NavigationGuardNext
): Promise<void> => {
}

// 导出多个路由守卫者方法
export default { loginPermission }

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

vue-router 使用 #

全家桶的引入 #

修改入口文件 src/main #

加入 router #

新建页面 #

修改 App.vue #

新增 router 路由设置 #

路由守卫者的封装 #