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-router：二级路由跳转另一条路由下的子级相关推荐

vue 函数路由跳转_vue中通过路由跳转的三种方式
router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...
vue路由跳转权限_vue权限路由实现方式总结
使用全局路由守卫实现前端定义好路由,并且在路由上标记相应的权限信息 const routerMap = [ { path: '/permission', component: Layout, re ...
vue路由跳转子组件_vue-router之路由钩子（组件内路由钩子必须在路由组件调用，子组件没用）...
模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型hi ...
2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面
1.路由全局守卫在做项目的时候,遇到需要做路由跳转,但当用户输入错误url地址,或是其它非法url路由地址,我们或许会想到跳转至404页面.不管你有没有写一个404页面,当出现未匹配路由都需重新指定 ...
react实现路由跳转_react实现hash路由
众所周知,目前单页面使用的路由有两种实现方式: hash 模式 history 模式 hash 模式路由原理: 我们先来看hash模式,页面首次加载时需要在load事件中解析初始的URL,从而展示进 ...
vue地址栏输入路由跳转到首页_Vue路由跳转到新页面时默认在页面最底部而不是最顶部的解决...
php截取字符串函数 public function sub_string($str, $len, $charset="utf-8") { if( !is_numeric($len ...
阻止路由跳转得方式_vue路由拦截及页面跳转的设置方法
路由设置:router/index.js main.js: { if (to.matched.some(res => res.meta.requireAuth)) { // 验证是否需要登陆 i ...
阻止路由跳转得方式_vue路由拦截及页面跳转设置的方法介绍
这篇文章主要介绍了vue路由拦截及页面跳转的设置方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下路由设置:router/index.jsexport default new Router ...
Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...

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

前提

结果

实验

结论

Vue-router：二级路由跳转另一条路由下的子级相关推荐

最新文章

热门文章