前端工作总结195-vue带参数跳转其他页面

1.准备好两个vue文件

panda.vue

travel.vue

2.写index.js配置文件

import travel from '@/components/travel'

• 1

1. ​​{​​
2. ​​path: '/travel/:id',​​
3. ​​name: '测试页面',​​
4. ​​component: travel​​
5. ​​}​​

3.编写跳转前的页面

这是一个点击事件

1. 
   
2. ​​gettravel(id) {​​
3. ​​this.$router.push({​​
4. ​​path: '/travel/' + id,​​
5. ​​})​​
6. ​​}​​
7. ​​},​​

• 1
• 2
• 3
• 4
• 5
• 6
• 7

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

1. 
   
2. ​​<span @click="gettravel(item.spotsid)">​​
3. ​​<h1>点击tiaoz</h1>​​
4. ​​</span>​​

4，编写跳转后的页面接收参数

<div>{{this.$route.params.id}}</div>