Vue路由中同一个组件地址访问自身报错解决方案

最新推荐文章于 2022-08-24 18:52:16 发布
最新推荐文章于 2022-08-24 18:52:16 发布
阅读量306 收藏 1
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45897872/article/details/105149477
版权

在vue项目中布局组件（父组件）跳转到子组件可以进行跳转，子组件再跳转到自身报错

在这里插入图片描述

具体流程如下：

1.父组件跳转到 占位组件
在这里插入图片描述
2.占位符组件只是起到跳转和传值
在这里插入图片描述
3.搜索子主键接收占位子组件的内容
在这里插入图片描述

当搜索组件访问自身的时候流程如下

1.访问父搜索组件
2.跳转到占位组件
3.在到结果子组件

所以不会出现自己访问自己的情况

如果遇到这方便问题，可以共同交流
bigOrange:QQ1104651288

大成锅
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue如何解决循环引用组件报错的问题
10-17
主要介绍了vue如何解决循环引用组件报错的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue异步组件处理路由组件加载状态的解决方案
12-10
在大型单页面应用中，处于对性能的考虑和首屏加载速度的要求，我们一般都会使用webpack的代码分割和vue-router的路由懒加载功能将我们的代码分成一个个模块，并且只在需要的时候才从服务器加载一个模块。 但是这种...
vue解决访问同一路由地址报错问题
weixin_44040867的博客
05-04 246
以下写入到router下面index.js中 // 解决两次访问相同路由地址报错 const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }
vue中，对于组件跳转同一组件或者路由，跳出bug的解决办法
m0_64207574的博客
02-09 635
vue中，对于组件跳转同一组件或者路由，跳出bug的解决办法
Vue 引入组件
qq_39772504的博客
02-20 317
1、引入js文件 在用的那一页，引入文件 // 需要引入框架： 相应的js文件里面，必须是暴露出来的 2、引入组件 3、引入外部组件 4、引入外部js插件 5. 给组件起别名 as 总结: 引入组件和需要写明组件路径, 如果引入如的是外部组件无需写文件路径, 只写明组件名称即可 ...
react路由传参,自身跳转
obj_null的博客
12-03 701
这次页面有一个逻辑，需要自身路由跳转到自身。那么正常情况下，咱们使用得history几个API，就不能用了，这里考虑使用a链接跳转或者是window.open()。最后还是选择了window.open().因为点击得同时，我还需要做一点其他得操作，所以就放在事件里面，它也比a链接灵活。 再写得时候就想着简单得总结下 路由跳转和路由传参。 ...
vue router动态路由下让每个子路由都是独立组件的解决方案
01-19
vue-router 之动态路由 vue-router官网上面是这样说的 // 带查询参数，变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 然后，我就这样写了： this.$router.push({path...
解决vue 引入子组件报错的问题
10-18
本文将深入探讨这个问题，并提供一个具体的解决方案。 首先，我们需要了解Vue中的组件系统。Vue允许我们将UI拆分成可重用的组件，这极大地提高了代码的复用性和可维护性。当我们在父组件中引入并使用子组件时，需要...
解决vue多个路由共用一个页面的问题
08-27
解决 Vue 多个路由共用一个页面的问题 在 Vue 开发中，遇到多个路由需要共用一个页面的需求是非常普遍的，特别是当路由是通过动态添加的，不同的路由展示的东西只是数据不同其他没有变化。这篇文章将与您分享解决 ...
vue路由跳转自己时报错
weixin_49074984的博客
08-20 1584
在router.js中加上 import VueRouter from 'vue-router' const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }
vue页面跳转的方式（自己记录）
zzzyqsama的博客
08-03 753
1.router-link跳转 //不带参数 <router-link to = '/index'> <button>go</button> </router-link> //带参数 <router-link to = "{path: 'index',query:{id:123456}"> <button>go</button> </router-link> <router-link to = "{pa
前端路由跳转基本原理
weixin_33786077的博客
01-31 1687
目前前端三杰 Angular、React、Vue 都推介单页面应用 SPA 开发模式，在路由切换时替换 DOM Tree 中最小修改的部分 DOM，来减少原先因为多页应用的页面跳转带来的巨量性能损耗。它们都有自己的典型路由解决方案，@angular/router、react-router、vue-router。 一般来说，这些路由插件总...
解决vue中多个路由共用同一个组件时，组件不会重新触发生命周期函数的问题
qq_45838886的博客
04-29 2147
解决vue中多个路由共用同一个组件时，组件不会重新触发生命周期函数的问题 比如aaa/a页面和aaa/b页面都用同一个组件c（使用路由跳转），但是在这两个页面相互切换时，并不会重新调用组件c的生命周期函数，我个人的理解是，当页面a切换到c时，在切换的过程中，vue会判断下一个路由的组件是否和当前的路由组件一样，如果一样，就直接复用，因此不会执行destroy等生命周期函数。 官方原话： 因此，如果想在切换的同时，重新加载组件，即重新触发组件的生命周期函数，可以给router-view绑定一个key值，这个k
页面原地跳转路由报错的问题
flying_chick的博客
02-25 260
跳转同页面路由会报错 “Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/index/project".” 为了解决报错参考大神文章地址：解决 Vue 重复点击相同路由，出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题_qq_36437172的博客-CSDN博
Vue--Router--解决多路由复用同一组件页面不刷新问题
IT利刃出鞘的博客
08-24 9366
本文介绍如何解决Vue的多路由复用同一组件页面不刷新问题。
vue路由跳转到同一个地址，获取不同参数
alo_ne的博客
12-10 1310
作为vue的初用者，你可能会像我一样遇到一个问题，对跳转组件是，我们想通过参数不同，调用不同的方法。 例如： app.vue <ul> <li class="navList" v-for="index in goods" :key="index.name"> <router-link :to="{path:index.link,query:{type:index.name}}" > {{index.name}} </route
vue-router基础（二）动态路由匹配
hrbsfdxzhq01的博客
02-15 758
我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果  const User = { template: '&lt;div&gt;User&lt;/div&gt;' } const router = new VueRouter({ ...
vue-router解决相同路径跳转报错
zhusixu的博客
03-20 2465
刚写完一个vue的项目，现在总结和记录下项目中遇到的问题，加强自己，并且分享给你们。 昨天也看了一下项目，忘记记录，今天还在看项目，就记录下。 今天看到路由的时候，看到下面这句代码，不知道什么作用了 VueRouter.prototype.push = function push(location) { return routerPush.call(this, location).catc...
vue+webpack项目 路由router的index里引入组件时报错问题
weixin_45450676的博客
07-09 1093
搭建项目时，路由引入组件报错问题
vue2中如何给一个组件声明它自己的路由地址
最新发布
06-10
在Vue2中，可以使用Vue Router来声明组件的路由地址。以下是简单的示例代码： 1. 在Vue Router中声明路由和组件的映射关系 ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import MyComponent from './components/MyComponent.vue' Vue.use(VueRouter) const routes = [ { path: '/my-component', component: MyComponent } ] const router = new VueRouter({ routes }) export default router ``` 2. 在组件中使用路由地址 ```html <template> <div> This is my component. </div> </template> <script> export default { name: 'MyComponent', mounted() { console.log('My component is mounted.') } } </script> ``` 在这里，我们将MyComponent组件映射到路由地址"/my-component"。在组件中，我们不需要手动声明它的路由地址，因为Vue Router会自动将路由地址注入到组件中的$route属性中。我们可以通过$route.path来获取当前组件的路由地址。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值