vue-router路由传参

1：配置路径rutes

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

export default new Router({   routes: [     {       path: '/testVueRouter',       name: 'TestVueRouter',       component: TestVueRouter     },     {       path: '/testVueRouterTo',      // 一定要写name,params必须用name来识别路径       name: 'TestVueRouterTo',       component: TestVueRouterTo     }   ] })

　　2：传递参数：用$router

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<!-- 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,注意啦

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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