# vue-router(路由)
# 简介
Vue Router 是 Vue 官方的客户端路由解决方案。
客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。
Vue Router 基于 Vue 的组件系统构建，你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。
# 集成到 JsView
JsView 默认已集成vue-router，采用 npm ci 的方式即可安装依赖包到工程中。 需要注意的是，目前 jsview-vue 工程中 vuejs 版本和可用的 vue-router 版本的对应关系如下。
| jsview-vue | vuejs版本 | pinia版本 |
|---|---|---|
| ^4.1.6 | 3.2.45 | 2.0.35 |
# 现存问题
- 同时存在多个 router-view 并使用 keep-alive 导致组件被多次创建的解决方法。
- 多个vue-router同时使用默认名字时，当直接跳转到嵌套（或并列）的其他子router-view时，当前组件的onMounted会被多调用一次。 如图：SubPageA在进入SubPageB再跳回后，多生成了一个inactive的SubPageA并mount。
- 解决方法: 确保全局只有一个默认的router-view，每个子组件通过命名router-view确定要放入哪个router-view中。
router.js
...
const routes = [{
path: '/subpage-a',
component: () => import("./view/SubPageA.vue"),
children: [{
path: 'subpage-aa',
name: 'SubPageAA',
components: { // 注意 components 和 component 的区别。
'router-a': () => import("./view/SubPageAA.vue"),
},
}],
}];
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
SubPageA.vue
...
<template>
<router-view name="router-a" v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</template>
...
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
← pinia(跨文件状态管理) 常见问题 →