vue 同一个页面路由无反应_vue参数不同但是跳转同一个路由页面，及name的作用...

最近在做VUE路由跳转根据参数的值不同但是跳转的是同一个路由的功能。点击左边的目录，根据目录ID跳转不同的列表。如下图。

当我点击常用表单下面的属性的时候，都是跳转到表单页面，只是属性参数不同，数据不一样。

========================================================================

正常的路由跳转

this.$router.push({

path:'formmanagement',

query:{

formState:'日常办公'}

})

但是我如果想要根据参数的值不同而去跳转相同的路由，以下是参数不同。

//1.

this.$router.push({

path:'formmanagement',

query:{

formState:'作战指挥'}

})//2.

this.$router.push({

path:'formmanagement',

query:{

formState:'应急处理'}

})

但是当我点击跳转的时候右边的列表是没有刷新的。因为路由没有变化。虽然参数发生了变化，但是调用的依然是同一个组件，组件复用了所以不刷新。

所以这时候就要使用不同的路由来跳转。下面在路由后面添加参数的值就可以让路由变化从而重新刷新页面。

this.$router.push({

path:'formmanagement/:formState',

name:'formmanagement', // 一定要写这个

query:{ formState:'应急处理'} })

此时还需要修改index.js里面的配置文件，路由后面加上:formState

{

path:'/formmanagement/:formState',

name:'formmanagement', // 上面匹配这里的name

meta: {

requireAuth:true,

component:()=>import("@/pages/formmanagement/formmanagement"),

再点击目录访问页面，发现URL正常了，还不是我想要的结果。因为就算路由发生了变化，数据还是没有变化。

因为vue每次调用组件的时候会观察是否已经created，而我的组件是已经created的，所以当我id发生变化的时候，组件没有重新创建。因此要在组件中再加上一个方法。把自己要处理的数据写在next()之后。

beforeRouteUpdate (to, from, next) {

next()this.formState = this.$route.params.formStatethis.queryuserdata(); //调用查询数据接口

}

vue 同一个页面路由无反应_vue参数不同但是跳转同一个路由页面，及name的作用...相关推荐

vue 同一个页面路由无反应_vue监听路由的变化，跳转到同一个页面时，Url改变但视图未重新加载问题...
[转]Linux学习之路--启动VNC服务我的Linux是Fedora 13,安装方法如下: 1.打开终端,执行 # yum install -y tigervnc tigervnc-server ...
active vue 路由样式保持_Vue 解决父组件跳转子路由后当前导航active样式消失问题...
举个栗子,导航栏如下图,当前新闻资讯的路由是:localhost:8083/#/new,导航栏样式如图所示: 随便挑个新闻点击后会跳转到子路由:localhost:8083/#/new/newDeta ...
vue中路由跳转怎样刷新页面保证页面更新
vue中我们实现从一个页面点击某一项跳转到另外一个页面事使用在点击事件中定义 <card @click.native="viewMoreRelation(item)" :ar ...
springmvc使用拦截器跳转至不同页面
前言在前后端未分离的传统web项目中,当前端访问后台时,后台controller会跳转至指定页面. 假如现在需要根据页面选择的不同语言,让后台跳转至不同页面.传统做法是写不同的controller, ...
聚合支付二维码如何实现自动识别扫码客户端跳转相应支付页面
前言前面有一篇<聚合支付之流程概述>和大家聊了一下关于聚合支付的一个简单流程.很多小伙伴私信我,如何实现聚合支付码的自动跳转呢? 其实,刚开始接触的时候我也很迷茫,一个静态的二维码 ...
解决vue 跳转相同路由携带不同参数，页面不渲染问题
项目中遇到跳转详情,但是详情中侧边有小列表的存在,这样就是相当于从详情跳到详情,如果直接使用this.router.push的方式,则会发现页面不会重新渲染,写在created和mounted内的方法 ...
vue click事件_Vue.js---实现前后端分离架构中前端页面搭建（二）
[Vue.js实现前后端分离架构中前端页面搭建] 九.Vue的事件处理 Vue的事件都是使用 v-on:事件类型进行绑定.也可以使用@事件类型进行操作.其中事件类型和之前学习jQuery中事件名称是 ...
vue项目没有router文件夹_Vue路由(vue-router)配置实战——动态路由，重定向，工程非根目录...
1. 前言 (1) 资料 (2) 需求本文是在上篇<使用vue-i18n实现多语言>功能的引申.需要实现的功能如下: 多语言需要反映在url上,英文.简体中文.繁体中文页面需分别为/en ...
vue子组件mounted不执行_vue 路由子组件created和mounted不起作用的解决方法
vue 路由子组件created和mounted不起作用的解决方法判断项目是否启用keep-alive 启用使用exclude排除组件(我没有成功不知道为什么) 使用v-if判断(成功解决) 可以 ...

vue 同一个页面路由无反应_vue参数不同但是跳转同一个路由页面，及name的作用...

vue 同一个页面路由无反应_vue参数不同但是跳转同一个路由页面，及name的作用...相关推荐

最新文章

热门文章