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
    },
  ]
})

<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>

<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>