<template>
<div>
<router-view></router-view>
<div>{{ $route.meta }}</div>
<button @click="clickFN">点我</button>
</div>
</template>
<script>
export default {
name: 'WorkspaceJsonApp',
data() {
return {}
},
mounted() {},
methods: {
clickFN() {
this.$route.meta.abc = 321
console.log(this.$route.meta.abc)
}
}
}
</script>
<style lang="scss" scoped></style>
这是route代码
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
component: () => import('../components/abc.vue'),
meta: { abc: 123 }
}
]
})
export default router
我想点击button将route.meta.abc更改成321,点击之后 console.log显示已经成功更改成321了但是页面还是显示123这是怎么回事呢?