vuerouter子路由跳转脱离父页面

最新推荐文章于 2022-03-29 14:56:04 发布
最新推荐文章于 2022-03-29 14:56:04 发布
阅读量899 收藏 4
点赞数
分类专栏： 项目踩坑 vue3 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44825765/article/details/119869827
版权
在尝试点击商品统计时，页面原本应显示在右下方的dashboard却错误地跳转到新页面。问题源于在注册动态路由时，未为main组件指定名称，导致组件被重新挂载，失去侧边栏和头部内容。解决方案是给main的映射添加一个名字，从而确保点击商品统计时，dashboard能正确在原页面显示，保留原有页面元素。
摘要由CSDN通过智能技术生成

 我希望点击商品统计，dashboard出现在页面右下方。

但是遇到的问题是：点击商品统计，直接跳转新页面。

 原因:注册动态路由时，往main中添加子路由，但是没有给main映射添加名字。所以浏览器控制台查看组件会发现，点击商品统计，会挂载新的app组件。丢失侧边，头部内容。

 解决：给main映射添加名字

 

weixin_44825765
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue监听路由的改变和监听页面的刷新与离开
明日复明日的博客
05-09 7736
要分清两者的区别。 首先是监听页面的刷新与离开，此时相当于直接在这个网页中按了刷新，如果是webapp则是离开这个app而不是切换路由！ 在script中直接增加监听器监视beforeunload： //监视如果页面离开 created() { window.addEventListener('beforeunload', this.updateHandler) }, beforeDestroy() {
AngularJS ui-router刷新子页面路由的方法
10-18
主要介绍了AngularJS ui-router刷新子页面路由的方法，网上虽然有很多种方法，但是都不适合小编，今天小编给大家分享一个还不错的方法，需要的朋友可以参考下
嵌套路由又称子路由哦！
hangnan315的博客
07-25 1050
嵌套路由 嵌套路由又叫子路由，实现相关路由组件在某个路由组件的 router-view 中渲染，而不是在 app 的 router-view 中渲染 children 嵌套路由的配置使用 children 属性 children中的定义方式，和routes一致 { path: "", component: Component, children: [ { path, component } ] } ！！！！！！注意！！！！！！ 子路由的 component 会被
vue路由router从父页面跳转子页面，父页面隐藏
qq_40798486的博客
09-01 3495
首页路由中 { path: "/", meta: { title: "电子说明书", icon: "menu", hideInMenu: true, index: 0, showFooter: true//使用这个，显示隐藏 }, component:
vue子页面调用父页面方法
a965925884的博客
07-28 3488
#vue子页面调用父页面方法 ##方法描述 父页面 （provide） provide() { return { onReconfigurationStatus: this.方法名, provideOnCancel: this.方法名 } }, 子页面 （inject） inject: ['provideOnCancel', 'onReconfigurationStatus'], //方法中使用 this.provideOnCancel(
vue router 子路由显示父路由页面bug处理
Marin6的博客
12-28 3001
vue router 子路由显示父路由页面bug处理。 1.场景 父路由不需要内容，只是单纯切换children中的子路由。 2.错误代码 父路由绑定了一个大页面的组件，导致切换到子路由地址时，仍然显示父级路由。 3.解决 父路由绑定一个空的router-view，可以通过render直接渲染。 4.总结 a.路由嵌套时，不需要父路由内容仍然要给父路由绑定component，不然不会显示子路由页面。 b.路由嵌套时，不需要父路由内容时，父路由可以绑定空的router-view。通过render渲染一个标
vue路由，父子路由跳转，父页面隐藏
couch potato的博客
03-29 5477
1. 路由配置 子路由的path不要加/ showfater用于显示隐藏父路由内容 { path:"/index", component:Index, name:"index", children:[ path:"child", component: Child, name:"child", meta:{ showfater: false } ], meta:{ showfater: true } } 2. 父
解决vue+router路由跳转不起作用的一项原因
11-20
在Vue.js应用中，路由是实现页面导航和组件切换的核心机制。Vue Router是官方推荐的路由库，它允许我们定义动态、嵌套路由，并提供多种导航控制方式。在这个问题中，我们将深入探讨为什么在某些情况下，`vue-router`...
Vue 页面跳转不用router-link的实现代码
08-27
Vue 页面跳转不用 router-link 的实现代码 本文主要介绍了 Vue 页面跳转不用 router-link 的实现代码，文中给大家介绍了 Vue router-link 跳转传值示例，需要的朋友可以参考下。 首先， Vue router-link 是 Vue.js...
vue-router跳转时打开新页面的两种方法
10-16
主要给大家介绍了关于vue-router跳转时打开新页面的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-router具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
详解vue-router 动态路由下子页面多页共活的解决方案
10-15
Vue Router 是 Vue.js 应用中的官方路由库，它允许我们定义应用的路由结构，实现页面间的导航。在动态路由的情况下，Vue Router 采用组件复用策略，即当路由参数改变时，同一组件会被复用，而不是重新创建。这在很多...
【Vue-router】解决父级路由不需要 component的情况
Songywaa的博客
03-24 7259
问题描述 后台系统页面中动态配置菜单，只有二级菜单有相应前端组件，一级菜单只是展示作用； 所以，出现 只设置二级路由，但一级路由不需要 component 的特殊需求； 看下页面展示：（移入一级菜单就弹出二级菜单，所以二级菜单才会有相对应的前端组件） [{ id:8, path: '/WryModule', name: '', meta: { title: '污染源在线监测' }, component: '', //这里是空的情况
vue2.0传值方式：父传子、子传父、非父子组件、路由跳转传参
weixin_30391339的博客
10-18 141
1. 父组件向子组件进行传值 父组件： <template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :inputName...
vue 子路由如何调用父路由中的方法
weixin_46852620的博客
02-13 1721
在父路由界面中有部分是子路由的内容，而问题是子路由的操作完成后需要调用父路由的一个方法来改变父路由中的样式 main.js Vue.prototype.$bus = new Vue() 父路由页面 <template> <router-view></router-view> </template> export default { name: "father", mounted() { let _this = this
vue-router嵌套路由中无父级组件的设置方法
block_xu的博客
01-08 5707
解决方法： component: {render: (e) => e("router-view")}, 需求 在一些情况下，会有设置二级路由，但一级路由不需要 component 的特殊需求 比如我在data路由下需要List页.../#/data/list，shop页.../#/data/shop 等，但每一个页面中没有任何相同的地方，也就是在.../#/data路由下不需要compone...
vue-router 2.0 常用基础知识点之router-link
大灰狼的小绵羊哥哥的博客
04-01 6922
前端采用前后端分离的方式进行开发，我们使用vue2.0框架，做单页面应用难免会用到vue-router，今天把项目中的用到router-link摘出来，一是想整理一下这些用法，方便下次快速查找，二是重新再过一下vue-router，增加熟悉度。也希望下面这些例子能帮到其他使用vue-router的朋友。http://www.jianshu.com/p/4b833b23dc4a 1，$rout
嵌套路由问题（子路由路径无法跳转，还是显示父路由）
weixin_41033048的博客
03-14 8183
官方文档的写法： 这里要注意的是，user有两个子路由，分别是profile和posts,如上图设置之后，需要在user.vue里面设置&lt;router-view&gt;&lt;/router-view&gt;才能显示跳转的子路由页面。 ...
Vue之vue项目中实现vue-router路由跳转
weixin_40736319的博客
04-14 2146
如我们所知，vue是一个大型的单页面应用，它实际上可以看成是只有一个页面，那么很多人会问，不同页面的切换该如何做处理？ 没错，靠的就是路由跳转vue-router了； vue项目中的路由跳转有很多种方式，以下且听我细细说来~ 1、首先，vue项目中应该先配置好Vue-Router，才能使用它: 我们使用vue-cli创建项目的时候，在执行vue init webpack {项目名...
解决iframe刷新子页面但是默认跳转到父页面
qq_42562636的博客
02-29 1727
前言： 用iframe做后台系统框架 这样导航栏就不用每个页面都添加了，但是当在子页面刷新页面的时候 就默认跳到父页面去了 我去 太坑了啊！！！！ 百度了半天 都是什么通过监听锚点是否改变来解决 我试了各种方法都不行 比如这篇文章写的很好 但是我这边就是没用 https://www.cnblogs.com/zhuxiaojie/p/5990262.html 于是想了想 如果用cooike能否解决...
vue3 router根据路由跳转新页面
最新发布
05-25
Vue3中的路由跳转需要使用Vue Router，以下是一个简单的示例： 1. 首先，安装Vue Router ``` npm install vue-router@4.0.0-0 ``` 2. 在main.js中引入Vue Router并创建一个路由实例 ``` import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') ``` 3. 在router.js中定义路由 ``` import { createRouter, createWebHashHistory } from 'vue-router' const routes = [ { path: '/', name: 'Home', component: () => import('./views/Home.vue') }, { path: '/about', name: 'About', component: () => import('./views/About.vue') } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router ``` 4. 在组件中使用`router-link`标签进行路由跳转 ``` <template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </div> </template> ``` 5. 如果需要在JS代码中进行路由跳转，则可以使用`router.push()`方法 ``` methods: { goToAboutPage() { this.$router.push('/about') } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值