vue跳转页面及传值

1. 在路由器中添加route

   import Vue from 'vue'
   import Router from 'vue-router'
   import HelloWorld from '@/components/HelloWorld'
   import Test from '@/components/test/Test'
   import Drect from '@/components/direct/Drect'
   Vue.use(Router)
   export default new Router({
     routes: [
       {
         path: '/',
         name: 'HelloWorld',
         component: HelloWorld
       },
       //触发跳转的组件
       {
         path: '/test',
         name: 'Test',
         component:Test
       },
       //跳转的目标组件
       {
         path: '/drect',
         name: 'Drect',
         component:Drect
       },
     ]
   })
   

    

2. 触发跳转的组件

   <template>
       <div>
           <span>在这里测试跳转页面</span>
           <input type="button" value="点击跳转" @click="directe()">
       </div>
   </template>
   <script>
   export default {
       methods: {
           directe() {
               this.$router.push({path: '/drect',query:{id:'1',name:'小青'}});
           }
       }
   }
   </script>
   <style>
   </style>
   
   
   
   

    

3. 跳转到的组件及参数的接受

   <template>
       <div>
           <span>这是要跳转到的页面</span>
           <br>
           <span>Id:{{$route.query.id}}  名字:{{$route.query.name}}</span>
       </div>
   </template>
   <script>
   export default {
       created() {
           console.log(this.$route.query.id)
       }
   }
   </script>
   <style>
   
   </style>