vue-router

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86767f447ae2485e92440a10671bdddf~tplv

1. 应用场景 有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。 2. 同级的

1. 定义 父组件里面想根据需要放置一些不同的子组件，那么可以使用嵌套路由 2. 编码 配置路由信息表，表达嵌套关系，Nav.vue 里面嵌入 Login.vue or Register.vue

方式一：query 显式参数 传递 Login.vue 接收 Register.vue 2. params 隐式传参 最新的 vue-router4 已经不支持这个方式了（2022-8-22） 3.

1. <router-link> 默认保留路由历史记录 2. 编程式导航，一般用 router.push() 实现路由跳转，保留历史记录 3. 在保留历史记录的前提下，可以用 router.go(nu

1. <router-link> 路径跳转 /src/router/index.ts 写好路径 /src/App.vue 实现跳转 2. <router-link> 名称跳转 /src/router/

1. 安装 npm i vue-router 2. 新建路由信息表 /src/router/index.ts 3. 新建路由组件 /src/pages/Login.vue /src/pages/Reg