vue跳转页面及传值

在路由器中添加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 }, ] })

 

触发跳转的组件 <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>