vue router-link子级返回父级页面

最新推荐文章于 2024-02-20 15:58:16 发布

转载最新推荐文章于 2024-02-20 15:58:16 发布 · 775 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Kyaya/p/10697709.html

文章标签：

#javascript #ViewUI

本文探讨了vue-router在嵌套路由中从二级路由跳转到一级路由时出现的一级路由重叠问题，并提供了解决方案：推荐使用this.$router.push进行页面跳转。

vue-router嵌套路由，从二级路由跳转到一级路由时，间歇性导致一级路由重叠

解决方法：

1.使用this.$router.push跳转

转载于:https://www.cnblogs.com/Kyaya/p/10697709.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30737433

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue全家桶笔记07(黑马vue)--vue-router的基本使用，路由重定向，嵌套路由，动态匹配路由，props路由组件传递参数，命名路由的配置规则，vue-router编程式导航

weixin_43745804的博客

06-24

542

1、vue-router的基本使用引入相关的库文件添加路由连接 router-link是vue中提供的标签，默认会被渲染为a标签 to属性默认会被渲染为href属性 to属性的值默认会被渲染为#开头的hash地址 <div id="app"> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> </

Vue路由的基本概念与原理，Vue-router的使用

Yueqin0512的博客

11-28

512

文章目录1. 路由的基本概念与原理路由的本质（1）后端路由（2）SPA（3）前端路由2. 路由的使用（1）Vue-router的基本使用（2）路由重定向（默认路径）（3）Vue-router的嵌套路由`children`（4）Vue-router的动态路由匹配（5）路由组件传递参数props①props的值为布尔类型②props的值为对象类型③props的值为函数类型（6）Vue-router的命名路由（7）Vue-router的编程式导航 1. 路由的基本概念与原理路由的本质路由的本质就是对应关系

参与评论您还未登录，请先登录后发表或查看评论

vue返回父级页面_vue子父级页面/两个及以上组件函数交互调用方法

weixin_42467768的博客

02-22

690

以公共vue组件间交互为例1.以下为Header.vue文件内容菜单1import Weather from '@/components/Weather'export default {data(){return {}},components: {Weather,},methods: {changed: function(res){this.$emit('on-changed',res);retu...

怎样在嵌套路由中返回父路由的上一级

weixin_52921391的博客

04-15

568

是这样的：如果我从数据概览或者终端详情页面进到用户中心，然后点击基本设置，修改密码，基本设置，修改密码。。。点击返回想回到数据概览或者终端详情怎么办？this.$router.push(’/…’)? 可是并不知道是从哪个页面进到个人中心的，如果还从动态路由进入就更不能用这个方法了 this.$router.go(-1)? 会返回到上一级，如果我在基本设置然后点击修改密码，只会返回到基本设置 //用户中心 { path: '/user', name: 'user',

【Vue】父子组件，子组件返回父组件页面

票票的博客

03-14

1878

父组件 <template slot="footer-operation"> <div ref="refUpdateButtons" :is="customComponent.updateButtons" :data="{parent:vm}"> </div> </template> data() { return { vm: this, } } 子组件 <template> <div> <el-b

vue单页面返回父页面时，父页面缓存状态

积累与备忘

07-13

368

1、在router定义中增加meta{keepAlive:true} { path: '/app', name: 'app', component: pages['App'], meta: { keepAlive: true} }, 2、router-view区分对待 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive>

js-Vue Router 中的方法,父A-子B-子C依次返回,无法返回到A,BC中形成循环跳转解决

岂不闻

02-20

550

Vue Router 中的方法,父A-子B-子C依次返回,无法返回到A,BC中形成循环跳转解决

浅谈vue 二级路由嵌套和二级路由高亮问题

10-14

const router = new VueRouter({ routes: [ { path: '/home', name: 'Home', component: Home, children: [ { path: 'one', component: One }, { path: 'two', component: Two } ] } ] }); ``` 在...

vue-router(3.5.1)源码梳理

Caristop3_走在前端这条大道上

04-09

3315

如何理解vue-router源码？ vue-router 源码分析 date: 2021-03-26 1. import Vue VueRouter 进来 2. 使用Vue.use(VueRouter) 来进行router的install -> 使用mixin混入每个组件钩子“beforeCreate”&“destroyed”

二、Vue Router-核心内容精讲

qq_41994396的博客

05-07

339

Vue Router 一、Vue Router 回顾 1、路由简介路由是一个比较广义和抽象的概念，路由的本质就是对应关系。在开发中，路由分为：后端路由前端路由后端路由概念：根据不同的用户 URL 请求，返回不同的内容本质：URL 请求地址与服务器资源之间的对应关系 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0FUADVcu-1683296278715)(images/后端路由.png)] SPA（Single Page App

vue router-link 返回上一页

ruanhongbiao的专栏

12-24

8809

1、如果使用了Vue-router的话，就可以用 this.$router.go（-1）实现返回； 2、如果没使用vue-router，就可以用 window.history.go（-1）实现返回效果。可以定义方法@click="goback" ethods:{ goback(){ this.$router.go(-1);/...

学习笔记——vue-router显示父路由地址

qq_41339126的博客

12-06

2228

vue-router如何显示父路由地址。以 "/" 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL。

Vue-router嵌套路由时父路由重复出现的问题

weixin_51173316的博客

08-31

4068

在写嵌套路由时，父路由为hi，子路由为hi2，hi3,修改前在router中是这样写的： export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/hi', component: Hi, alias: '/greet', children:

vue 子页面调用父页面方法并获取返回值

u013795975的博客

05-25

1万+

在使用子组件调用父组件方法：this.$emit(方法名, 参数1, 参数2)，该方法的返回值是vue对象，而不是父组件方法的return值。此时要用回调函数作为参数，父组件里执行该回调函数，返回值后给子组件，然后子组件再接收。 // 父组件 <template> <List @delCheckFun="delCheckFun"></uploader> </template> <script> export default.

vuerouter子路由跳转脱离父页面

weixin_44825765的博客

08-23

1009

我希望点击商品统计，dashboard出现在页面右下方。但是遇到的问题是：点击商品统计，直接跳转新页面。原因:注册动态路由时，往main中添加子路由，但是没有给main映射添加名字。所以浏览器控制台查看组件会发现，点击商品统计，会挂载新的app组件。丢失侧边，头部内容。解决：给main映射添加名字 ...

【110】Vue2利用父子路由实现标签页切换，并且支持浏览器回退。

zhangchao19890805的专栏

02-15

3941

源代码仓库：https://gitee.com/zhangchao19890805/csdnBlog.git 用 git clone 克隆下这个项目后，blog110 文件夹里面就是这篇博文相关的源代码。项目依赖使用了yarn进行管理。文件目录结构： blog110 │ ├─.babelrc ├─.npmrc ├─index.template.html ├─packag...

vue心得二（子页面返回父级列表页时设置scrollTop）

weixin_42124996的博客

09-26

904

1、设置<keep-alive>官方文档，在APP.vue中设置，如下： <template> <div id="app"> <keep-alive> <router-view/> </keep-alive> </div> </template> 2...

vue返回上一页面时回到原先滚动的位置

最新发布

02-23

### Vue.js 中 `router-view` 传递参数在 Vue.js 应用程序中，可以通过多种方式向嵌套路由组件传递数据。最常见的方式之一是利用动态路由匹配来实现参数的传递。 #### 动态路由定义当设置路由配置时，可以在路径中加入冒号前缀的占位符作为动态部分： ```javascript const routes = [ { path: '/user/:id', component: User } ]; ``` 这里的`:id`就是可以变化的部分，在实际应用中可以根据这个变量获取不同的用户信息[^1]。 #### 访问路由参数对于上述定义好的带有参数的路由，在对应的组件内部能够通过 `$route.params` 来读取这些参数值并用于渲染逻辑之中。例如展示用户的ID: ```html <p>当前用户的 ID 是 {{ $route.params.id }}</p> ``` 如果想要更进一步简化父级组件与子级组件之间的通信，则推荐采用 props 属性绑定的方式来完成这一目标。 #### 使用 Props 绑定传参为了使父子组件间的交互更加直观清晰，可以从父组件直接给子组件发送属性（props）。这不仅限于静态的数据还可以包含来自 URL 的动态片段。首先修改路由规则以启用 prop 自动映射功能： ```javascript const routes = [ { path: '/product/:id', component: Product, props: true // 启用了自动将 url 参数转换成 props 发送给 target component. }, ]; ``` 接着调整 `<router-view>` 所指向的目标组件接收相应的 props 输入： ```html  <template> <div> 商品编号为：{{ productId }} </div> </template> <script> export default { name: 'Product', props: ['productId'], // 接收名为 productId 的 prop }; </script> ``` 这样做的好处在于让代码结构更为整洁有序，并且提高了可维护性和扩展性[^2]。 #### 实际案例中的实践考虑到具体场景下的需求差异较大，这里给出一个综合性的例子——导航栏内链接至不同分类的商品列表页，并携带类别标识作为查询条件的一部分。 ```html <nav-bar>  <ul> <li><router-link :to="{name:'category', params:{type:'electronics'}}">电子产品</router-link></li> <li><router-link :to="{name:'category', params:{type:'clothing'}}">服装鞋帽</router-link></li> </ul>  <router-view v-bind="$route.params"></router-view> </nav-bar> ``` 以上展示了如何基于命名路由以及对象形式指定跳转地址的同时附带必要的参数信息；而被加载进来的视图则会依据接收到的内容作出响应式的更新处理[^3]。