使用Vue-router二级路由跳转另一条路由下的子级
目录
- 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>
<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使用vue-router如何实现路由跳转与参数获取
目录 vue-router实现路由跳转与参数获取 路由跳转和传参 路由跳转三种方法的总结 一.第一种 二.第二种 三.第三种 vue-router实现路由跳转与参数获取 路由跳转和传参 import { defineComponent, onMounted, reactive, readonly, ref } from 'vue'; import { useRouter, useRoute } from 'vue-router'; export default defineComponent({
-
Vue实现路由跳转和嵌套
一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D 安装完成后,在 src 文件夹下,创建一个 routers.js 文件,和 main.js 平级 然后在 router.js 中引入所需的组件,创建 routers 对象 import Home from './components/home.vue' const routers = [ { path: '/home', name: 'h
-
vue-router路由跳转问题 replace
目录 vue-router路由跳转replace vue router路由跳转方法概述 一.概述 二.跳转方法 三.路由中params和query的区别 vue-router路由跳转replace 1.push 常用 this.$router.push() 2.replace 不会在浏览器得历史记录中加,只会替代掉最后一条记录(这个比较好用) this.$router.replace() 3.go this.$router.go() this.$router.back(-1) vue route
-
Vue.js实战之利用vue-router实现跳转页面
前言 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 这次的实例主要实现下图的效果: 项目结构: 一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D
-
使用Vue-router二级路由跳转另一条路由下的子级
目录 Vue-router二级路由跳转另一条路由下的子级 结果 实验 vue二级路由跳转一级路由激活处理 本人是这么处理的 Vue-router二级路由跳转另一条路由下的子级 实验项目中,在一个 /list/user 列表中,当点击某一条时,需要跳转到 /detail/userId/user 详情下,展示详情信息. router.js const routes = [ { path: '/ue/matter/list', name: 'list', component: List, childr
-
vue router权限管理实现不同角色显示不同路由
目录 思路: 主要逻辑代码 全部页面代码 思路: login页面登录时 加上角色的标记,存储到本地缓存(localstorage) 路由js文件,meta属性加个是否可见(visiable true或false) home 基本导航栏页面逻辑,首先 可以获得到 所有一级菜单和角色标记 for 循环一级菜单 找出角色 所在的 角色数组(判断某个值在不在 数组中) 然后 所在的数组 visiable 改为true ,其他的改为false ui框架 是ant design of vue 主要逻辑代码
-
详解Vue router路由
目录 1.基本使用 2.几个注意点 3.多级路由(多级路由) 4.路由的query参数 5.命名路由 6.路由的params参数 7.路由的props配置 8.编程式路由导航 9.缓存路由组件 总结 1.基本使用 2.几个注意点 3.多级路由(多级路由) 4.路由的query参数 5.命名路由 例如像三级目录 ,每次写都需要带上一二级目录,比较麻烦,采用命名路由可以用name直接找到 6.路由的params参数 1)在配置路由的时候需要先声明接收params参数,即先占位 2) 7.路由的pro
-
解决vue+router路由跳转不起作用的一项原因
如下所示: Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, { path: '/register',component: Register}, {path: '/*', component: NotFound}, ] }) 记得要写上 mode:'history',
-
vue router 路由跳转方法讲解
目录 一.概述 二.跳转方法 1.使用router-link标签 2.使用router-replace 3.使用router-push 三.路由中params和query的区别 一.概述 使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库. 那么在平日开发中,有多少种跳转路由的方法? 二.跳转方法 1.使用router-link标签 使用router-link标签,我们通常会使用到2个参数,最常用的就是to参数to参数,表示你想要跳转到的路由对象 router-link标
-
vue router动态路由下让每个子路由都是独立组件的解决方案
vue-router 之动态路由 vue-router官网上面是这样说的 // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 然后,我就这样写了: this.$router.push({path:'manage', query: {id: 'tasklist'}})1 结果很明显,失败了.然后我就默默的再次看了一下官网,结果发现了这句话 // 命名的路由 r
-
vue路由跳转时判断用户是否登录功能的实现
通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha
-
vue router路由参数刷新消失问题的解决方法
场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})传给主页组件,并在主页显示数据.但是刷新页面后,数据就消失了. 解决方案: 1.session&服务器渲染 传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页数据,并通过响应头将sessionid传给浏览器并生成相应的cookie文件.这样下次请求页面时,浏览
-
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in