vue 路由参数变化,页面不更新的问题

监控$route

<script>
export default {
    data() {
        return {
            setMealId: 0,
            setMealTypes: [
                {type: ‘A‘, newPrice: 255, oldPrice: 752},
                {type: ‘B‘, newPrice: 120, oldPrice: 560},
                {type: ‘C‘, newPrice: 325, oldPrice: 699},
            ],
            setMealItems: [
                {imgSrc: require(‘../../../static/setMeal/setMeal_icon_02.png‘), txt: ‘特制营养早餐‘, info: ‘免费‘},
                {imgSrc: require(‘../../../static/setMeal/setMeal_icon_03.png‘), txt: ‘检中医护免费咨询‘, info: ‘现场‘},
                {imgSrc: require(‘../../../static/setMeal/setMeal_icon_04.png‘), txt: ‘主检医生总结报告‘, info: ‘10日‘}
            ]
        }
    },
    created() {
        this.setMealId = this.$route.query.id;
    },
    watch: {
//      ‘$route‘ (to, from) {
//          if(to.query.id !== from.query.id){
//              location.reload();//此方法页面会空白再显示,交互体验不好
//          }
//      }
        $route(){
            this.setMealId = this.$route.query.id
        },
        setMealId() {
            this.setMealDetail();
        },
    },
    methods: {
        setMealDetail() {
            //axios请求
        }
    }
}
</script>

原文地址:https://www.cnblogs.com/duanzhenzhen/p/10604675.html

时间: 2024-10-11 02:19:34

vue 路由参数变化,页面不更新的问题的相关文章

Vue中解决路由切换,页面不更新的实用方法

前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新的问题了. 一.问题呈现 在路由中进行切换结果 这时候会发现input标签的value值并没有随着路由的改变而改变.并没有更新 二.解决方案① 给<router-view :key="key"></router-view>增加一个不同:key值,这样vue

vue路由传参页面刷新参数丢失问题解决方案

最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

vue data数据变化 页面数据不更新问题

问题: <template> <div class="container"> <div v-for="(item, index) in arrList" :key="index"> <span>{{ item.name }}-{{ item.age }}-{{ item.score }}</span> </div> </div> </template>

vue中监听路由参数的变化

在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数. 可以添加路由监听: watch: { $route: { handler() { this.id = this.$route.query.id; this.get

$Django 路飞之小知识回顾,Vue之样式element-ui,Vue绑定图片--mounted页面挂载--路由携带参数

一 小知识回顾 1 级联删除问题 2 一张表关联多个表,比如有manytomanyfileds forignkey,基于对象查询存在的问题:反向查询的时候  表名小写_set.all()不知是哪个字段queryset对象  所以说related_name='coursedetail_by' 3 Vue生命周期钩子可以直接发axios 二 Vue样式用elemen(jq用bootstap) 网站http://element-cn.eleme.io/#/zh-CN/guide/design 1 em

vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题

引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变化doing...'); } }, created() { var self = this; self.fetchData(); }, watch:{ '$route':'fetchData' }, 原文地址:https://www.cnblogs.com/ilimengyang/p/9197797

vue路由导航守卫及前置后置钩子函数参数详解

首先构建一个测试demo如下图: 接着来探讨路由配置界面 import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' Vue.use(Router) const router = new Router({ routes: [{ path: '/', name: 'HelloWorld', component: resolve => require

vue.js路由参数简单实例讲解------简单易懂

vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们提供命令行来安装 npm install vue-router --save 第二种,我们直接去官方github下载 https://github.com/vuejs/vue-router 路由参数设置 1,实例化一个路由,然后路由映射表中的地址带参数,这个参数就是路由的参数 接着给映射表中的路由设

Vue - 路由传递参数

Vue 2.0  路由传递参数 Vue 路由传递参数 有两种方式: 一.用name传递参数 两步完成用name传值并显示在模板里: 在路由文件src/router/index.js里配置name属性. 1 2 3 4 5 6 7 routes: [ { path: '/', name: 'Hello', component: Hello } ] 模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示: 1 <p>{{ $route.name}}</p&