1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue 路由参数变化 页面不刷新 provide /inject 完美解决方案

vue 路由参数变化 页面不刷新 provide /inject 完美解决方案

时间:2023-04-28 14:01:24

相关推荐

vue 路由参数变化 页面不刷新 provide /inject 完美解决方案

此方法使用的是v-if来控制router-view的显示或隐藏,v-if从false变为true时,vue会重新渲染router-view区域,所以当参数变化时,只需让v-if 从true => false => false,就能实现页面刷新;

问题描述

官网地址

路由http://localhost:1221/newproduct?entityId=7B311104点击div时,变为http://localhost:1221/newproduct页面不刷新怎么办……

温馨提示,此方法适用vue 2.20+版本,请先查看你的vue版本

首先,找到自己的route-view

app.vue

<template><div class="os_container"><navbar></navbar><router-view v-if="isRouterAlive"></router-view></div></template><script>import navbar from '@/components/navbar'export default {name:'mainframe',provide(){return {reload:this.reload}},data () {return {isRouterAlive:true,}},components:{navbar,},methods:{reload(){this.isRouterAlive = false//在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOMthis.$nextTick(()=>{this.isRouterAlive = true})}}}</script><style scoped lang="stylus"></style>

<route-view>下显示的页面

切换语言的页面里

export default {name: 'newproduct',inject:['reload'], // // 接受App那边提供的方法method:{//点击div的时候,路由参数改变,//调用mainfirem.vue下的this.reload()方法,来改变v-if的状态clickDiv(){this.reload()}}

可用在多语言的切换页面

<template><div><Dropdown trigger="click" @on-click="selectLang"><a href="javascript:void(0)">{{ title }}<Icon :size="18" type="md-arrow-dropdown" /></a><DropdownMenu slot="list"><DropdownItem v-for="(value, key) in localList" :name="key" :key="`lang-${key}`">{{ value }}</DropdownItem></DropdownMenu></Dropdown></div></template><script>export default {name: 'Language',inject: ['reload'], // 接受App那边提供的方法props: {lang: String},data () {return {langList: {'zh-CN': '语言','zh-TW': '語言','en-US': 'Lang','ja-JP': '言語'},localList: {'zh-CN': '中文简体','zh-TW': '中文繁体','en-US': 'English','ja-JP': '日语'}}},watch: {lang (lang) {this.$i18n.locale = langthis.reload() // 在触发切换语言后调用,相当于直接调用app里写的reload方法}},computed: {title () {return this.langList[this.lang]}},methods: {selectLang (name) {this.$emit('on-lang-change', name)}}}</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。