路由带参数写法和keep-alive页面初始化函数

chen_vae

于 2020-06-01 16:33:42 发布

阅读量874

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue js

本文链接：https://blog.youkuaiyun.com/chen_vae/article/details/106475357

vue 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何使用带有参数的路由进行页面跳转及参数传递，同时探讨了keep-alive组件在页面切换时的刷新问题，提供了created和activated方法的正确使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.路由中带参数

{
      path: "/select/:moduleId",
      name: "select",
      component: Select,
      meta: {
        isKeep: true, // 需要被缓存
      }
    },

页面中产值和取参

// 页面跳转传值
this.$router.push({path:'/select/'+ 1});

// select页面取值
this.moduleId = this.$route.params.moduleId

2.keep-alive的页面，再次进入不刷新问题

created方法只在第一次进入的时候自行，返回上个页面再次重新进入，created方法不再执行，activated会每次执行

// 进入页面刷新的方法
activated () {
      this.moduleId = this.$route.params.moduleId
 }

// 离开该页面刷新的方法
deactivated () {
      this.moduleId = this.$route.params.moduleId
 }