vue-cli只改变参数的页面跳转

最新推荐文章于 2023-09-23 14:29:36 发布

rrzzhang

最新推荐文章于 2023-09-23 14:29:36 发布

阅读量504

点赞数

本文链接：https://blog.youkuaiyun.com/sinrryzhang/article/details/101062587

版权

直接用router-link组件在跳转页面时，发现新的页面数据没有刷新，但是路由参数是改变了的。怎么让页面跟着刷新呢？

解决方法：监听路由

watch: {
"$route" (to, from) {
//请求数据的方法
}
},

监听到路由有变化，再请求数据，这样页面就可以更新了。

切记：单页应用不能用a标签或local.href，会造成整个页面资源的重载

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

rrzzhang

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用vue-cli来搭建vue项目,路由跳转，嵌套路由

qq_62797382的博客

07-21

473

N 新手就不用了，但实际项目中一般都会使用，这样多人开发也能达到一致的语法。5.Install vue-router：是否需要vue-router，Y选择使用，这样生成好的项目就会有相关的路由配置文件。：是否安装e2e测试 N。1.Project name：项目名，默认是输入时的那个名称spa1，直接回车。#安装所有项目需要的npm模块。运行完上面的命令后，我们需要将当前路径改变到SPA这个文件夹内，然后安装需要的模块。必须先安装vue,vue-cli，webpack，node等一些必要的环境。

vue-cli搭建项目过程

最新发布

2302_78078800的博客

08-25

3276

前端js框架 vue-cli的使用

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

Vue页面跳转时，跳转路由不变，仅改变参数，页面不更新问题解决

ITarmi的分享

04-01

2597

http://localhost:8080/#/index?count=3 http://localhost:8080/#/index?count=4 可以看到跳转的路由是一样的，仅参数值count改变了。但是页面中的参数count并没有刷新，表现为跳转无效。解决：在该页面添加监听，当参数值发生改变时，重新加载数据。改代码段写在script中，与method/create同级 watch: { $route(to, from) { //监听路由是否变化 if (to.q

vue路由跳转只是参数变更，页面不刷新的问题完美解决

liangzg

07-30

1762

vue路由跳转只是参数变更，页面不刷新的问题完美解决背景解决背景 vue路由this.$router.push的页面和当前页面一致，只有参数变化时候，从浏览器看地址变化了，但是页面内容没有刷新解决 router-view上用时间戳增加一个key，可以完美解决不刷新的问题 ...

vue 跳转当前页面改变url携带的参数并刷新页面

lovewangyage的博客

02-19

1600

vue 跳转当前页面改变url携带的参数并刷新页面

vue2.X 解决同一路由跳转只有参数变化的情况下，组件不刷新的问题

weixin_34390105的博客

02-11

415

情况：点击导航切换下方组件的内容展示，组件不变，变的只有路由后面的参数 <router-link :to="{ name: 'Itemlist', params: { category_id: item.product_category_id, ...

vue 解决路由参数变化当前页面以及页面内的组件未更新的问题

Kotoba209_的博客

01-10

3208

需求描述：当前路由不变，参数改变，页面进行动态渲染如：/users/1 -> /users/2 ，参数由1变为2，页面数据需要更新，但是一般情况下原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。先介绍用到的两个方法 watch 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名...

vue-cli3.0实现一个多页面应用的历奇经历记录总结

11-21

本文实例讲述了vue-cli3.0实现一个多页面应用的历奇经历。分享给大家供大家参考，具体如下：故事背景这是在刚请完假回来，一切都在计划之中，早上一来，就接到项目经历的新的需求（这个是烂摊子，已经好几个人接手...

详解如何将 Vue-cli 改造成支持多页面的 history 模式

08-28

然而，当项目需求扩展到多页面应用时，Vue-cli的默认配置并不完全适用。在这种情况下，需要对Vue-cli进行改造，使其支持多页面的history模式。历史模式（history mode）是Vue Router的一种路由模式，它可以提供更...

thinkphp集成前端脚手架Vue-cli的教程图解

10-18

通过这种方式，Vue和PHP代码完全解耦，Vue的部分只关注单页的编写，而页面跳转和路由配置则由PHP处理。为了提高开发效率，你不必每次修改Vue代码都重新打包。只需运行`npm run dev`启动本地服务器，在`...

vue 解决路由只变化参数页面组件不更新问题

12-13

形如： http://localhost:8080/#/xxx?a=1&b=1 如果只是变化？后面的参数，页面组件并不会响应解决办法：使用watch监听路由$route对象属性的变化 watch: { '$route' (to, from) { // data数据操作 } } 以上这篇vue 解决路由只变化参数页面组件不更新问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

vue路由传值，修改地址栏参数而不刷新页面

qq_57052578的博客

09-23

3195

vue路由传值，修改地址栏参数而不刷新页面

vue-cli3:多种方式实现页面跳转

你若盛开，清风自来

01-09

6440

<template> <div> <div>我们的页面是：</div> <router-link class="to" to="/?id=1">首页</router-link> <router-link class="to" to="/detail?=2">详情页</ro...

Vue-cli 2.9 多页配置及多页面之间的跳转问题

weixin_30455365的博客

05-21

1927

vue开发，现在大部分做的都是（SPA）应用，但是，由于，需求不同，我们针对的用户需求变更较为，频繁，如果每次都全量打包更新，给开发的自测，及测试妹子的任务就会多，每次都要重新验证一下才放心。所以，想着能不能搞一个多页的，进行增量升级，所以就有了以下的配置。网上配置很多，也很详细，我也有参考。废话不多说开始吧！如果有说的不对的，请大家指出，我会及时改正。一目录结构调整修改之后目录 ...

vue的页面跳转参数改变页面不重新加载

weixin_44975002的博客

04-22

496

在App.vue文件夹内的添加上一个唯一的key标识 <router-view :key="key" /> 在下边的添加一个页面表示 computed:{ key(){ return this.$route.name?this.$route.name+ +new Date():this.$route+ +new Date() } },

对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式

撕裂彡天堂丶的博客

12-06

1万+

对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式本人系前端小白，如有不对的地方轻喷，只是写自己总结下来的一些简单应用。 1.路由跳转的两种基本方式 2.动态修改class名如果有不对的地方还请各位大牛指出。

用vue-cli快速搭建vue脚手架+实现vue页面跳转的小demo

智者乐享行者无疆

01-29

4275

文章首发于个人博客,转载参考请注明来源用vue-cli快速搭建vue脚手架+实现vue页面跳转的小demo 微信小程序的页面跳转和生命周期函数[一个简单的 vue 页面跳转示例项目地址

vue 组件监听页面切换_vue监听url参数变化实现跳转当前页面组件复用并实现dom数据刷新解决方案...

weixin_42309178的博客

12-29

2281

解决思路：1、子路由组件监听URL变化a、created函数中：created: function () {var self = thisself.fetchData()this.$store.state.count = 0 //在中央状态管理区中添加一个count值来标识是否重新加载，当页面每次加载完后把count值重新设置为0},b、watch函数中：watch: {'$route': 'fe...

vue项目页面跳转的常用方法