The combination of Vue’s routing query, name (path naming), and props configuration
- Function: Pass parameters through query to improve the reusability of routing components
Before learning, learn about it first
- The routing component instance has two properties: $route (will be called to the index.js file) and $router
- $route: Your own routing object.
- $router: Router object shared by multiple components.
query parameters
- The first: string form, using
name=value & amp;name=value
- The second type: string concatenation form, using
name=${value} & amp;name=${value}
- The third type: object form (commonly used), using the query object to pass parameters
// A.vue
<template>
<div>
<h2>A</h2>
<div>
<ul>
<!-- The first method: use query mode to pass parameters and use string mode -->
<li><router-link to="/a/c?a1=111 & amp;a2=222 & amp;a3=333">A1 Router-Link</router-link></li>
<!-- The second type: use query method to pass parameters and use string splicing method -->
<li><router-link :to="`/a/c?a1=${a[0]} & amp;a2=${a[1]} & amp;a3=${a[2]}`\ ">A2 Router-Link</router-link></li>
<!-- The third method: use query method to pass parameters and use object form (commonly used) -->
<li>
<router-link :to="{<!-- -->
path: '/a/c',
query : {<!-- -->
a1 : a[0],
a2 : a[1],
a3 : a[2],
}
}" >
A3 Router-Link
</router-link>
</li>
</ul>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {<!-- -->
name: 'A',
data(){<!-- -->
return{<!-- -->
a : ['111', '222', '333']
}
}
}
</script>
// C.vue is a sub-route of A.vue
<template>
<div>
<h2>C</h2>
<ul>
<!-- Receiving method -->
<!-- The first type -->
<li>{<!-- -->{<!-- -->$route.query.a1}}</li>
<li>{<!-- -->{<!-- -->$route.query.a2}}</li>
<li>{<!-- -->{<!-- -->$route.query.a3}}</li>
<!-- The second type: loop, changed to a different form, but the principle remains the same -->
<li v-for="aName, pName in $route.query" :key="pName">
{<!-- -->{<!-- -->aName}}
</li>
</ul>
</div>
</template>
<script>
export default {<!-- -->
name: 'C',
}
</script>
- The calling principle of
{{$route.query.a1}}:
- $route points to the route of the index.js file
- The query points to the value contained in to=”” in the vue file
- a1 points to the name of value
- Get the path corresponding to index.js through $route (because C.vue is a sub-route of A.vue, so you will find path:’/a/c’), and then find the query of A.vue through the path name (also That is, three forms of value), and finally find the value to be output according to the corresponding name.
// index.js
//Introduce route
import VueRouter from 'vue-router'
//Introduce routing components
import A from '../pages/A'
import B from '../pages/B'
//Introduce new routing components
import C from '../pages/C'
//Create router
export default new VueRouter({<!-- -->
// Multiple routes can be configured
routes : [
{<!-- -->
//The path used to connect to the router
path: '/a',
// Components associated with routing
component :A,
children : [
// There can be multiple sub-routes
{<!-- -->
// In the sub-route, there is no need to add "/" to the path. The system will add it by itself.
path: 'c',
component:C,
}, //You can add sub-routes downwards
]
},
{<!-- -->
path: '/b',
component:B
}
]
})
Name the route (name)
- Function: Name the path.
- Note: name is only suitable for object form, and the path in object form is not required when using name.
// index.js Add name to sub-route
import VueRouter from 'vue-router'
import A from '../pages/A'
import B from '../pages/B'
import C from '../pages/C'
export default new VueRouter({<!-- -->
routes : [
{<!-- -->
path: '/a',
component :A,
children : [
{<!-- -->
// Name the route. In this way, you can only use:to="{}"
name: 'ac',
path: 'c',
component:C,
}
]
},
{<!-- -->
path: '/b',
component:B
}
]
})
// A.vue
<template>
<div>
<h2>A</h2>
<div>
<ul>
<!-- The third method: use query method to pass parameters, use object form (commonly used) -->
<li>
<router-link :to="{<!-- -->
name: 'ac',
// There is no need for path if there is name
// path: '/a/c',
query : {<!-- -->
a1 : a[0],
a2 : a[1],
a3 : a[2],
}
}" >
A3 Router-Link
</router-link>
</li>
</ul>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {<!-- -->
name: 'A',
data(){<!-- -->
return{<!-- -->
a : ['111', '222', '333']
}
}
}
</script>
- Summary: Query passing parameters does not change the index.js file much (if name is not used), but more changes are made when calling and setting parameters.
The combination of query parameters and props configuration
- The function of props: abbreviate the reception method to make the interpolation syntax more concise, that is, the abbreviation
{{$route.query.a1}}
Two ways to configure props
- The first one: static writing method, passing the key and value to the component through props
// index.js
import VueRouter from 'vue-router'
import A from '../pages/A'
import B from '../pages/B'
import C from '../pages/C'
export default new VueRouter({<!-- -->
routes : [
{<!-- -->
path: '/a',
component :A,
children : [
{<!-- -->
//Name the sub-route
name: 'ac',
path: 'c',
component: C,
// Static writing method, pass key and value to components through props
props : {<!-- -->
a1 : '111',
a2 : '222',
a3: '333'
}
}
]
},
{<!-- -->
path: '/b',
component: B
}
]
})
// C.vue is a sub-route of A.vue
<template>
<div>
<h2>C</h2>
<ul>
<!-- Receiving method -->
<li>{<!-- -->{<!-- -->a1}}</li>
<li>{<!-- -->{<!-- -->a2}}</li>
<li>{<!-- -->{<!-- -->a3}}</li>
</ul>
</div>
</template>
<script>
export default {<!-- -->
name: 'C',
// Here we need to receive props
props: ['a1', 'a2', 'a3']
}
</script>
- The second type: functional
// index.js
import VueRouter from 'vue-router'
import A from '../pages/A'
import B from '../pages/B'
import C from '../pages/C'
export default new VueRouter({<!-- -->
routes : [
{<!-- -->
path: '/a',
component :A,
children : [
{<!-- -->
name: 'ac',
path: 'c',
component:C,
// Functional style, $route here can be written casually, there is no need to pay attention to it
props($route){<!-- -->
return {<!-- -->
a1 : $route.query.a1,
a2: $route.query.a2,
a3 : $route.query.a3
}
}
}
]
},
{<!-- -->
path: '/b',
component:B
}
]
})
// C.vue is a sub-route of A.vue
<template>
<div>
<h2>C</h2>
<ul>
<!-- Receiving method -->
<li>{<!-- -->{<!-- -->a1}}</li>
<li>{<!-- -->{<!-- -->a2}}</li>
<li>{<!-- -->{<!-- -->a3}}</li>
</ul>
</div>
</template>
<script>
export default {<!-- -->
name: 'C',
// Here we need to receive props
props: ['a1', 'a2', 'a3']
}
</script>