Vue-router实现跳转路由及数据传递

Vue-router实现跳转路由

实现：
1、为按钮添加点击事件

 2、在事件中，通过this.$router对象的：
     1.push方法指明路径
     
     push：这个方法会向 history 栈添加一个新的记录

     2.replace方法指明路径

     replace：不会向历史记录添加新记录，
     而是跟它的方法名一样 —— 替换掉当前的记录。

// 进行跳转
      this.$router.push('/seafood')

*跳转的两种方式：

1. <router-link to="/driedBiguo">闭果</router-link>
   2.添加事件

数据传递：

1、在index.js文件下，修改driedFruit映射

const routes  = [
  //5.映射path与组件的关系
  {path:'/home',component:home},
  {path: '/mine',component: mine},
  {
    //传递数据
    path:'/driedFruit/:fid4',
    component:driedFruit,

2.在app.vue文件的vue实例中，添加data

data(){
    return{
      ganshuoactivate:true,
      shucaiactivate:false,
      seafoodactivate:false,
      vegetablesactivate:false,
      fruits1:'ShuiGuo',
      driedFruit:'GanGuo',
      seafood:'HaiXian',
      vegetables:'ShuCai'
    }

3.在方法中添加

 // 进行跳转
      this.$router.push('/driedFruit/'+this.driedFruit)

4.在将数据传递到的.vue文件中添加

<h3>{{fruitsinfo1}}</h3>

 //动态数据
  export default {
    name: "driedFruit",
  computed:{
    fruitsinfo1(){
      return this.$route.params.fid4;
    }
  },