使用Vue-router二级路由跳转另一条路由下的子级

Rhea ·

更新时间:2024-09-20

· 770 次阅读

Vue-router二级路由跳转另一条路由下的子级

结果

实验

vue二级路由跳转一级路由激活处理

本人是这么处理的

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>
    &nbsp;&nbsp;
<router-link :to="{ path: 'foo', name: foo}">path + name </router-link>
&nbsp;&nbsp;
<router-link :to="{ path: 'bar', query: {plan:'private'} }">path + query /bar?plan="private"</router-link>
&nbsp;&nbsp;
    <router-link :to="{ name: 'user', params: {userId:123} }">name + params /user/123</router-link>
    &nbsp;&nbsp;
        <router-link :to="{ name: 'many', query: {plan:'private'} }">name + query </router-link>
        &nbsp;&nbsp;
        <router-link :to="{ params: { userId: 123 }, query: {plan: 'private'} }">params + query </router-link>
        &nbsp;&nbsp;
        <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]"

这样就可以匹配目标页面的路由匹配头部就聚焦

以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。

VUE vue-router 路由

1024 个赞