来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

添加路由

使用router.addRoute()可以添加路由，一次只注册一个新的路由

如果新增的路由与当前位置相匹配，需要使用router.push()或router.replace()手动导航，才能显示该新路由

如果想避免命名冲突，可以使用Symbol作为路由名

1
router.addRoute({path:"/about",component:About})

删除路由

当路由被删除时，所有的别名和子路由也会被同时删除

方法1

添加一个名称冲突的路由，如果添加与现有路由name相同的路由，会先删除原路由，再添加新路由

1
2
3
router.addRoute({ path: '/about', name: 'about', component: About })
// 这将删除之前已经添加的路由，因为他们具有相同的name，而name必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })

方法2

调用 router.addRoute() 返回的回调

1
2
const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由，如果存在的话

方法3

使用 router.removeRoute() 按name删除路由

1
2
3
router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')

查看现有路由

router.hasRoute()：检查路由是否存在

router.getRoutes()：获取一个包含所有路由记录的数组

案例

常用于后台返回一个路由表，前端调接口拿到后处理

后端（node.js express）：

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import express, { Express, Request, Response } from 'express'

const app: Express = express()

app.get('/login', (req: Request, res: Response) => {
  res.header("Access-Control-Allow-Origin", "*");
  if (req.query.user == 'admin' && req.query.password == '123456') {
    res.json({
      route: [
        {
          path: "/demo1",
          name: "Demo1",
          component: 'demo1.vue'
        },
        {
          path: "/demo2",
          name: "Demo2",
          component: 'demo2.vue'
        },
        {
          path: "/demo3",
          name: "Demo3",
          component: 'demo3.vue'
        }
      ]
    })
  } else if (req.query.user == 'admin' && req.query.password == '123456') {
    res.json({
      route: [
        {
          path: "/demo1",
          name: "Demo1",
          component: 'demo1.vue'
        },
        {
          path: "/demo2",
          name: "Demo2",
          component: 'demo2.vue'
        },
      ]
    })
  } else {
    res.json({
      code: 400,
      mesage: "账号密码错误"
    })
  }
})

app.listen(9999, () => {
  console.log('http://localhost:9999')
})

Login.vue：

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<template>
  <div class="login">
    <el-card class="box-card">
      <el-form ref="form" :model="formInline" :rules="rules" class="demo-form-inline">
        <el-form-item prop="user" label="账号">
          <el-input v-model="formInline.user" placeholder="请输入账号" clearable />
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input type="password" v-model="formInline.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from "vue-router"
import { ElMessage } from "element-plus"
import type { FormItemRule, FormInstance } from "element-plus"
import axios from "axios"

const router = useRouter()

// 省略......

const formInline = reactive<Form>({
  // 省略......
})

const form = ref<FormInstance>()
const rules: Rules = {
  // 省略......
}

const onSubmit = () => {
  form.value?.validate((validate)=> {
    console.log(validate)
    // 验证是否通过
    if(validate) {
      initRouter()
    } else {
      ElMessage.error("请检查输入")
    }
  })
}

const initRouter = async ()=> {
  const res = await axios.get('http://localhost:9999/login',{params:formInline})
  res.data.route.forEach((v:any) => {
    // 注册路由
    router.addRoute({
      path: v.path,
      name: v.name,
      // vite在动态添加时没法使用别名，必须使用相对路径
      component: ()=> import(`../component/${v.component}`)
    })
  })
  router.push("/index")
  // 查看已添加路由
  console.log(router.getRoutes())
}
</script>

<style scoped lang="scss">
.login {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Index.vue：

1
2
3
4
5
6
7
8
<template>
  <div>
    登陆成功
    <router-link to="/demo1">demo1</router-link>
    <router-link to="/demo2" style="margin-left: 10px;">demo2</router-link>
    <router-link to="/demo3" style="margin-left: 10px;">demo3</router-link>
  </div>
</template>