vue-router路由传参
1:配置路径rutes
export default new Router({ routes: [ { path: '/testVueRouter', name: 'TestVueRouter', component: TestVueRouter }, { path: '/testVueRouterTo', // 一定要写name,params必须用name来识别路径 name: 'TestVueRouterTo', component: TestVueRouterTo } ] })
2:传递参数:用$router
<!-- test-vue-router页面 --> <template> <div> <a @click="routerTo()">query传参</a> </div> </template> <script> export default { methods: { routerTo() { this.$router.push({ name: `TestVueRouterTo`, params: { page: '1', code: '8989' } }) } } } </script>
3:接受参数:用$route,少个r,注意啦
<!-- test-vue-router-to页面 --> <template> <div> </div> </template> <script> export default{ data() { return { page: '', code: '' } }, created() { this.getRouterData() }, methods: { getRouterData() { this.page = this.$route.params.page this.code = this.$route.params.code console.log('page', this.page) console.log('code', this.code) } } } </script>