A, < the router – link: to = “…” The value in > to can be a string path or an object describing an address. Such as:

<router-link to="apple"> to apple</router-link> // object <router-link :to="{path:'apple'}"> to apple</router-link> <router-link :to="{name: 'applename'}"> to apple</router-link> color=red <router-link :to="{path: 'apple', query: {color: 'red'}}"> to apple</router-link> color=red <router-link :to="{name: 'applename', query: {color: 'red'}}"> to apple</router-link> </router-link> <router-link :to="{path: 'apple', params: {color: 'red'}}"> to apple</router-link> 'applename', params: { color: 'red' }}"> to apple</router-link>Copy the code

Second, the router. Push (…). The same rule applies to router.push(…) Methods.

// String router.push('apple') // Object router.push({path:'apple'}) // Named router. Push ({name: 'applename'}) // Direct route with query, address bar becomes /apple? Color =red router.push({path: 'apple', query: {color: 'red'}}) color=red router.push({name: 'applename', query: {color: Router. push({path:'applename', params:{color: Push ({name:'applename', params:{color: 'red'}})Copy the code

Three, pay attention

1. Routes with parameters are summarized as follows:

Either the direct route “path” or the named route” name “, with the query parameter query, will change the address bar to “/ URL? Query parameter name: Query parameter value; Direct route params params does not take effect. The address bar of the named route “name” with route parameter params remains/URL/Route parameter value.

2. Set the path value in the route map:

For params, the path in the route map should be written as: path:’/apple/:color’; With query, path in the route map should be written as: path:’/apple’;

3. Method of obtaining parameters:

{{$route.params.color}} in js: this.$route.params.color