Vue2 router dynamically transmits parameters to instances with multiple parameters. vue2router

Vue2 router dynamically transmits parameters to instances with multiple parameters. vue2router

This is used in a project generated using vue-cli.

For example, a route jump requires two parameters:

<Router-link to = '/tr'> View </router-link>

You can write as follows:

<Router-link to = '/tr/uid/pid'> View </router-link>

Then go to router. js to process the route:

import Vue from 'vue'import Router from 'vue-router'import tr from '@/components/tr.vue'import tab from '@/components/tab.vue'Vue.use(Router)export default new Router({ routes: [ {  path:'/tr/:uid/:pid',  name: 'tr',  component:tr }, {  path:'/tab',  name: 'tab',  component:tab } ]})

You need to use vue-router in router. js, specifically in path: '/tr/: uid/: pid', add a colon after the backslash, which means the following is the route parameter.

Then the corresponding tr. vue component accepts this route parameter:

You can access this key-value object through this. $ route. params of the instance,

Let's assign a value to the request route to see:

<Router-link to = '/tr/8080'> View </router-link>

Print the following Object {uid: "15", pid: "122 "}

The above vue2 router dynamically transmits parameters. The example of multiple parameters is all the content shared by Alibaba Cloud. I hope you can provide a reference and support for the customer's house.