1. Use vUE tags to pass parameters

1. Label parameter transfer

<router-link :to="{path:'/login',query:{userId: "33333"}} "> < / router - the link > < the router - link: to =" {name: "' Message ', params: {userId: '1234'}}" > Hi page 1 < / router - the link >Copy the code

2. Use this.$route.params.userid to receive parameters

Router name attribute (params, router name attribute); router name attribute (params, router name attribute); router name parameter (params, router name attribute);

Params: 1. Configure the path router

export default new Router({ routes: [ { path: '/testVueRouter', name: 'TestVueRouter', component: TestVueRouter}, {path: '/testVueRouterTo', // Must write name,params must use name to identify path name: 'testVueRouterTo', Component: TestVueRouterTo } ] })Copy the code

2. Pass parameters using $router

<! -- test-vue-router page --> <template> <div> < a@click ="routerTo()">query pass parameter </a> </div> </template> <script> export default { methods: { routerTo() { this.$router.push({ name: `TestVueRouterTo`, params: { page: '1', code: '8989' } }) } } } </script>Copy the code

3: Accept parameters with $route

<! -- test-vue-router-to page --> <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>Copy the code

Query: F5 forcible refresh will not be cleared because the parameter applies to params. (String is strongly recommended)

1. Configure the path router

export default new Router({ routes: [ { path: '/testVueRouter', name: 'TestVueRouter', component: TestVueRouter}, {path: '/testVueRouterTo', // Must write name,params must use name to identify path name: 'testVueRouterTo', Component: TestVueRouterTo } ] })Copy the code

2. The query parameter

<! -- test-vue-router page --> <template> <div> < a@click ="routerTo()">query pass parameter </a> </div> </template> <script> export default {methods: {routerTo() {this.$router. Push ({name: 'TestVueRouterTo',}) {methods: {routerTo() {this. '1', code: '8989' } }) } } } </script>Copy the code

3. Receive parameters

<! -- test-vue-router-to page --> <template> <div> </div> </template> <script> export default{data() {return {page: '', code: '' } }, created() { this.getRouterData() }, methods: {getRouterData() {// Just change the query, This. Page = this.$route.query.page this. Code = this.$route.query.code console.log('page', this.page) console.log('code', this.code) } } } </script>Copy the code

Use params if you want to hide parameters, and query if you want to force a refresh that is not cleared