使用vue-router在页面之间传值及接收值

最新推荐文章于 2022-07-18 09:00:42 发布

转载最新推荐文章于 2022-07-18 09:00:42 发布 · 869 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guoliping/p/9844036.html

文章标签：

#javascript #java #ViewUI

本文详细介绍如何在Vue.js中使用$router.push方法进行页面间传值，并在目标页面通过this.$route.params.id获取传入的值。同时，讨论了在页面刷新时保持传值的方法，即在路由配置中使用动态路径匹配。

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

第一页点击去第二页的时候进行传值直接贴代码看：

<template>
  <div id="app">
    <div><router-link to="/">首页</router-link></div>
    <div><a href="javascript:void(0)" @click="getMovieDetail(1)">去第二个页面</a></div>
    <div><router-link to="/home">去home</router-link></div>
    <router-view/>

    <a href="https://www.feiyit.com">abc</a>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods:{
    getMovieDetail(id) {
      this.$router.push({
        name: 'login',
        params: {
          id: id
        }
      })
    }
  }
}
</script>

<style>

</style>

红色部分为传值部分，使用this.$router.push()进行传值

第二页面接收从第一个页面传递过来的参数 id

<template>

</template>

<script>

export default {
  name: 'login',
  data () {
    return {
      uid:this.$route.params.id,
      msg: '这是第二个页面'
    }
  },
  computed: {
           
    },
  mounted: function() {
            console.log(this.uid);
    },
  methods:{

  }
}
</script>

　　红色部分打印下传递过来的id值，在接受传值的页面里使用this.$route.params.id 即可获取到传递的值

注意，如果刷新login页面，将失去传值

解决方法，在路由里面增加变量其中【/login/:id】

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login/:id',
      name: 'login',
      component: login,
      meta: {
            title: '登录页'
      }
    },
    {
      path: '/home',
      name: 'home',
      component: home,
      meta: {
            title: '其他页'
      }
    }
  ]
})

转载于:https://www.cnblogs.com/guoliping/p/9844036.html