欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue带参数跳转其他页面

程序员文章站 2024-03-24 21:25:34
...
1.准备好两个vue文件

panda.vue
travel.vue
vue带参数跳转其他页面

2.写index.js配置文件

vue带参数跳转其他页面
vue带参数跳转其他页面

import travel from '@/components/travel'
    {
      path: '/travel/:id',
      name: '测试页面',
      component: travel
    }
3.编写跳转前的页面

vue带参数跳转其他页面
vue带参数跳转其他页面
这是一个点击事件


      gettravel(id) {
        this.$router.push({
          path: '/travel/' + id,
        })
      }
    },

这里触发事件,并且传递参数


<span @click="gettravel(item.spotsid)">
                    <h1>点击tiaoz</h1>
                    </span>
4,编写跳转后的页面接收参数
<div>{{this.$route.params.id}}</div>