router-view 不随 url 变化

最新推荐文章于 2023-03-29 12:36:03 发布
最新推荐文章于 2023-03-29 12:36:03 发布
阅读量200 收藏
点赞数
分类专栏： vue 路由
原文链接：https://blog.csdn.net/qq_36742720/article/details/83008480
版权

Vue.js 路由 组件切换 错误排查 前端开发
关键词由CSDN通过智能技术生成
vue 同时被 2 个专栏收录
30 篇文章 0 订阅
订阅专栏
路由
3 篇文章 0 订阅
订阅专栏

https://blog.csdn.net/qq_36742720/article/details/83008480

这个我点击同一个页面的不同 router-link ，按理说匹配到的组件应该被切换，但是！并！没！有！

死活想不出哪里的错误，感觉应该是某一个单词写错了......

最后粘贴别人做好的，再一个一个改，我感觉也是改完之后跟我之前的没啥不同啊...，可是就是这样就好了.....

还是感谢原博主吧

fina_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue更新路由router-view复用组件内容不刷新的问题
10-16
通过上述方法，我们可以在Vue项目中解决由于路由变化导致的router-view复用组件内容不刷新的问题。这些方法各有优劣，开发者可以根据项目的具体需求和情况选择合适的方法来应用。在实际开发中，可能需要测试不同的...
【Vue】Vue Router使用router-link，URL变化，页面不刷新、数据没变
记录开发学习笔记
08-04 3838
开发过程中遇到一个Bug，在列表选择一条数据，跳转到详情页，然后通过浏览器回退到列表，再选择另一条数据，进入详情页，发现数据显示的是上一次的数据。在详情页vue created函数中，输出列表页传来的值，发现第二次详情页跳转，created函数并没有执行。 列表页跳转的代码 <el-table-column label="类型" align="center" :show-overflow-tooltip="true"> <template slot-scope="scope"
router-view 不渲染
qq_27681677的博客
03-29 939
一般做vue项目使用vue-router的时候，会突然发现router-view不渲染，并且没有报错的问题出现，会搞的一头雾水，寻找逻辑，文件命名及引入也没有什么毛病，大概率上就是很小的细节上我们给忽略掉了，以致找不到问题所在，一般情况下，很容易忽视的一个错误是routes写成了routers,另外一个呢，就是component写成了componets.（如上图红框所示的位置。
vue-router路由
qq_41799870的博客
05-25 144
路由是一种对应关系 后端路由 前端请求的url和后端对该地址处理函数的对应关系，如router.get('./index',function(){}), ./index与function的对应关系就是后端路由 前端路由 通过前端hash路径（如路径中的#/login）和组件的对应关系 1. 路由的基本使用 通过script引入vue-router 定义组件 实例化路由对象 new VueRuter() 配置路由规则 router：路由； route：规则 routes:[ {path:'./l
element导航栏页面刷新内容没有跟随跳转
weixin_64463374的博客
01-16 754
解决思路：可以在代码中绑定一个事件函数，在函数方法中传入index参数，并且使用localStorage存储index，接着在生命周期函数created中把index赋值。给default-active绑定$route.path就可以快速实现 :default-active="$route.path"。点击其它导航，然后刷新页面，会发现导航栏刷新了回复到了默认。但是router-view(下面展现的内容)没有跟随改变。（此处我用来解决横向导航，但方法应该是通用的）2.解决思路：直接在。
router-view使网页的某部分根据不同的URL渲染内容
StillWaters_ing的博客
12-25 911
实现效果：点击导航栏的不同li，改变网页url，但网页只有部分会被渲染 1、首页（FirstPage）main部分使用router-view` <template> <div class="firstpage"> <el-container> <el-header class="clearfix" style=...
vue中的router-view组件的使用教程
10-17
在这个例子中，`navbar`组件的路由链接触发的路由变化会影响到父组件中`<router-view>`的渲染。 总结起来，Vue Router 的`<router-view>`组件是实现单页应用路由切换的关键，它允许我们在同一页面中动态地加载和...
详解vue-router 2.0 常用基础知识点之router-link
12-09
在Vue 2.0中，`router-link`组件是用于创建导航链接的关键元素，它与`router-view`配合使用，实现了单页面应用(SPA)的页面切换。 首先，我们来看`$route.params`。这是一个对象，存储了动态路径参数和全匹配片段。...
vue-router 起步步骤详解
10-17
当我们访问不同的 URL 时，对应的组件就会被渲染在 <router-view> 所在的位置。 ```html <router-view></router-view> <!-- 通过模板中放置元素来确定vue-router渲染组件的位置 --> ``` 5. 配置连接的入口 ...
vue-router 源码之实现一个简单的 vue-router
08-27
<router-view></router-view> ``` JavaScript 部分，我们需要定义各个路由组件（如 Home、Book 和 Movie），并配置相应的路由映射： ```javascript const Home = { template: '<div>home</div>' }; const Book =...
vue之router-view组件的使用
热门推荐
luoyu6的博客
04-26 32万+
开发的时候有时候会遇到一种情况，比如 ：点击这个链接跳转到其他组件的情况，通常会跳转到新的页面，蛋是，我们不想跳转到新页面，只在当前页面切换着显示，那么就要涉及到路由的嵌套了，也可以说是子路由的使用。   以饿了么订餐的情景来说吧，在同个页面，切换显示不同组件的相应内容，同时地址栏的地址是会变的 怎么实现它呢？ 首先 我们在导航组件navbar.vue中写了三个导航链接，他们对应地址分...
Router-view
qq_59076775的博客
05-11 5万+
我们都知道，路由指的是组件和路径的一种映射关系。Router-view也被称为路由的出口,今天我们就探讨下如何去使用路由出口。 也就是: 路径--------------------------------------------------------------->页面 可以把router-view理解成一类代码存放的位置。 一.基本的路由配置(没用子集) 我们都知道所有的组成注册最终在app.vue注册完毕。 通过代码来分析: import Vue from 'vue' im
vue-router 点击router-link to，地址栏不变的问题
weixin_51300999的博客
03-20 4448
浅浅的写一下的踩坑。 在router的index.js里面挂载了导航守卫 // 挂载路由导航守卫 router.beforeEach((to,from,next) =>{ // to将要访问的路径 // from 代表从哪个路径跳转而来 // next是一个函数,表示放行 // next()放行next('/login')强制跳转 if (to.path === '/login') return next() // 获取token const tokenS
router-view跳转页面路径没变
搬砖团团长
08-31 302
跳转页面代码报错，我的就是在 beforeRouteEnter (to, from, next) { } 这部分报错； 改成下面这样或者去掉beforeRouteEnter都可以 beforeRouteEnter (to, from, next) { next(vm => { vm.init(to.fullPath); }) } 这样你在刷新跳转一下就正常了 ...
Vue Router路由变化router-view视图不刷新
彭世瑜的博客
09-22 1797
通过添加key 来让视图进行刷新 <router-view :key="$route.fullPath" />
vue-router路由_根据url的不同，请求不同的列表数据
ZH
07-30 2108
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
Vue项目中刷新当前页面的四种方法
u012211003的博客
07-24 5万+
Vue项目中刷新当前页面的四种方法前记刷新当前页面的四种方法this.$router.go(0)location.reload()跳转空白页再跳回原页面使用provide / inject组合控制的显示（推荐） 前记 有时候，在当前页面添加或删除一条记录的时候希望当前页面可以刷新一下，从而更新页面数据。 我们知道，在路由到另一页面的时候会重新加载该页面，相当于刷新了页面，但是使用vue-router重新路由到当前页面，页面是不进行刷新的。下面介绍几种刷新页面的方法。 刷新当前页面的四种方法 this.$ro
Vue 中使用 router-link 后，URL 变化但是页面不刷新，Vue获取java后台传过来的值
qq_33922980的博客
12-02 3115
一.遇到的问题:Vue 中使用 router-link 后，URL 变化但是页面不刷新 今天在项目中遇到了这样的问题: 当使用 router-link 跳转后， 想要返回，浏览器中的地址虽然改变了，但是页面却并没有刷新 解决的办法 1.我最原始的使用了刷新页面的办法，在vue中使用了this.$router.go(-1) 返回上一级，然后使用this.$router.go(0) ，使用了这种方...
router-view与router-link
最新发布
09-27
在Vue文件中，可以将<router-view>标签放置在需要根据路由动态显示内容的位置上，当路由发生变化时，router-view会根据当前路由对应的组件进行渲染显示。 总结一下，router-link用于设置路由跳转，而router-view...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值