vue路由和组建之间的传值

第一步用vue-cli创建项目，然后运行项目具体方法之前有写

第二步在自己创建的vue项目中找到router这个文件，里面有个index.js文件就是控制路由的

第三部在里面配置路由

1、同级组建之间路由、在index.js组建之间引入你要路由的界面通过import

2、如我引入import Header from '../components/header.vue'

3、然后再Router方法里面添加

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {//这段代码是新添加的
      path: '/Header',
      name: 'Header',
      component: Header
    }
  ]
})

4、在你要跳转的页面添加<router-link to="/Header">跳转</router-link>就可以进行页面跳转

而同级组建之间跳转传参有好几种方法  我再此写两种路由传参方法

一、第一种是通过<router-link to="/Header"></router-link>传参和接收传参的值

1、<router-link :to="{path:'/Header',query: {dataL:data}}">跳转</router-link>此方法通过query方法传参

2、在你跳转中的页面进行接收你的传参通过this.$route.query.dataL就可以接收你传过来的参数

二、 第二种通过点击跳转路由进行传参

1、在你要进行跳转的页面添加点击事件<div @click="goLink" style="margin-top: 20px;">点我进行跳转传参</div>

2、在methods方法中添加下面代码就可以进行传参

goLink () {
  this.$router.push({
    path: '/Header',
    query: {
      text:this.msg
    }
  })
}

3、还是通过之前的方法进行接收要传过来的参数this.$route.query.text