使用Vue-router二级路由跳转另一条路由下的子级
更新时间：2022年10月25日 14:19:39 作者：Whitess007
这篇文章主要介绍了使用Vue-router二级路由跳转另一条路由下的子级问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue-router二级路由跳转另一条路由下的子级
实验项目中，在一个 /list/user 列表中，当点击某一条时，需要跳转到 /detail/userId/user 详情下，展示详情信息。
router.js
const routes = [
{
path: '/ue/matter/list',
name: 'list',
component: List,
children: [
{ path: 'user', name: 'list-user', component: ListUser },
],
props: true
},
{
path: '/ue/matter/detail/:userId',
name: 'detail',
component: Detail,
children: [
{ path: 'user', name: 'detail-user', component: DetailUser },
],
props: true
}
]ListUser 组件中，采用编程式导航的方式跳转，写法如下：
this.$router.push({name:detail-user, path:`/ue/matter/detail/user/${userid}/user}`)；或者如下
this.$router.push({name: detail-user});结果
组件内容确实更换了，但浏览器上的地址栏错了
实验
看官方文档说，path+params地方式会被忽略，所以将router.push中用到的键path、params、name、query分别组合做了一个页面，来测试哪种会不可以。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>router-linkto</title>
<link rel="stylesheet" href="">
</head>
<body>
<div id="app">
<router-link :to="{ path: 'home' }">path单独 </router-link>
<router-link :to="{ path: 'foo', name: foo}">path + name </router-link>
<router-link :to="{ path: 'bar', query: {plan:'private'} }">path + query /bar?plan="private"</router-link>
<router-link :to="{ name: 'user', params: {userId:123} }">name + params /user/123</router-link>
<router-link :to="{ name: 'many', query: {plan:'private'} }">name + query </router-link>
<router-link :to="{ params: { userId: 123 }, query: {plan: 'private'} }">params + query </router-link>
<br/>
<br/>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const Home = {
template: '<div>Home path单独 <span v-on:click="change()">点击跳转到path+name</span> </div>',
methods: {
change: function() {
this.$router.push({name: "foo", path: "/foo"})
}
}
}
const Foo = { template: "<div>Foo path+name</div>"}
const Bar = { template: "<div>Bar path+query</div>"}
const User = { template: "<div>User {{$route.params.userId}}</div>" }
const Many = { template: "<div>Many name+params</div>" }
const Too = { template: "<div>Too params + query</div>" }
const router = new VueRouter({
routes: [
{
path: "/home",
component: Home
},
{
name: "foo",
path: "/foo",
component: Foo
},
{
path: "/bar",
component: Bar
},
{
name: "user",
path: "/user/:userId",
component: User
},
{
path: "/many",
name: "many",
component: Many
},
{
path: "/too/:userId",
component: Too
}
]
})
new Vue({
el: '#app',
router
})
</script>
</html>
结论：
结果是：除了path+params之外，params+query也不可以，因为没有告知路径信息
那对于上面涉及二级跳转，那写name + path的方式，我理解的是path需要拼接，所以给了name就会找不到路径。我之后的修改是，只传给push一个字符串路径。
this.$router.push(`/ue/matter/detail/user/${userid}/user`)vue二级路由跳转一级路由激活处理
有时候有的页面是一个页面的子页面，这时候点击打开跳转到二级页面，这个时候
一级导航的路由可能激活状态不对应
本人是这么处理的
<el-menu :default-active="$route.path.match('(/[a-z]+[^/]){1}')[0]"这样就可以匹配目标页面的路由匹配头部就聚焦
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue3是一个流行的前端框架,vite是一个快速的构建工具,下面这篇文章主要给大家介绍了关于vue3+vite项目跨域配置踩坑实战的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vue中使用Datav如何完成大屏基本布局问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
这篇文章主要介绍了vue 实现 ios 原生picker 效果及实现思路解析,本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2017-12-12
这篇文章主要介绍了vue的滚动条插件实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
本篇文章主要介绍了Vue实现自带的过滤器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
本篇文章主要介绍了Vue+Element使用富文本编辑器的示例代码，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
本篇文章主要介绍了vue实现增删改查效果的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了vue自动路由-单页面项目（非build时构建）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
这篇文章主要介绍了详解关于表格合并span-method方法的补充(表格数据由后台动态返回) ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
本篇文章主要介绍了vue 运用mock数据的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论