开发路由path重复问题

128 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第2天,点击查看活动详情 image.png

1.如何清除http://localhost:8082/后面的路径 ??

每一次 push 是在上一次的path路径基础上做拼接

image.png

image.pngimage.png

2.思路: 利用钩子函数 在点击菜单 把path缓存起来 to.path替换

本地缓存记录 当前的路径 如果下一个path路径中存在上一次的路径 就把它删除掉 在跳转

image.png

image.png

打算是在路由守卫跳转之前把 重复的路径去除掉 但发现这个to.path是只读属性

image.png image.png

image.png

3.后来朋友告知:是不是套了多个router view?

查看还真的是 以前没有用layout布局写 真的nt

3.1 看下路由表嵌套确实嵌套了多个层级

image.png

image.png

3.2 router-view 那个地方用到

app.vue

b06e40e63bc5ed2d981b867b45827cd.png

home.vue

d9526b87510c0523d1987048f60d9bd.png

store.vue

image.png storeChild.vue

image.png

4.重写layOut 布局

参考:github.com/ganganlee/v…

4.1 vue 三个层级路由表是怎么设置的

两个层级是这样的

image.png

项目有三级菜单开发情况时,如下图,需要在对路由配置时,新建一个二级菜单页面并添加一个< router-view>< /router-view>标签用来承载三级页面

<template>
 <div>
   <router-view></router-view>
 </div>
</template>

<script>
export default {
 
}
</script>

参考: blog.csdn.net/qq_43186285…

ps: 路由配置如上时,子路由注意路径不要加‘/’ 这是因为vue-router中嵌套路径以“/”开头时将被当做根路径;

就是上面这句 找出了这个bug的原因

5.原因:少加“/” 当做根路径 跳转

少加了个 斜杠

image.png

6.vue 返回怎样联动菜单栏?

6.1 浏览器前进后退按钮联动vue菜单高亮和面包屑变化

blog.csdn.net/Gx0525_/art…