1. query parameters:
Query parameter passing, passing the parameter through get is the original parameter passing, followed by the path path? id=18&name="Zhang San", it will be passed to the query
Example: { path:'/home'?name='Zhang San'&age=18, component:()=>import('./home.vue') }
Get the object through $route.query, point the attribute name, and get the parameters
2. Dynamic routing parameter passing (params parameter passing):
Multiple /: ids can be followed after the path, and the parameters written on the path will be passed to the dynamic routing parameters
实例：{
path:'./home/:id/:age',
component:()=>import('./home')
}
Using $route.params in the template will get the parameter object, and the attribute name will get the passed parameters
3.meta tradition:
Pass through meta: {name:'Zhang San', id: 17} on the routing configuration file
Example: {
path:'./home',
component:()=>import('./home')
meta:{name:'Zhang San',id:16}
}
Using $route.meta in the template will get the parameter object, and the attribute name will get the passed parameter
4. props parameter passing (divided into three modes: Boolean mode, object mode, function mode):
(1) Boolean mode:
Pass parameters in Boolean mode. In the path configuration in the routing configuration file, if you use dynamic routing, then he can not only pass parameter objects to params, but also pass them to props. Note that parameter access needs to be in Access it from the component of the path you want to jump to. If you want to use props to pass parameters through dynamic routing, you need to set props to true
Example: { path:'/home/:id/:name', component:()=>import('./Home'), props:true //Boolean mode },
props: ['id', 'name'], received in the component template
(2) Object mode:
Declare a props object in the object of the configuration path, and its internal parameters can be received in the corresponding template
Example: { path:'/list', component:()=>import('./List'), props:{ name:'Lao Wang', age:20, sex:"male" } //object mode } ,
props: [,'name','age','sex'], received in the component template
(3) Function mode:
Declare a props attribute, only for functions, you can return the parameters you want to pass through the return object, and receive them in the corresponding template
Example: { path:'/goods', component:Goods, props:()=>{ //function mode return { name:'Lao Wang', age:20, sex:"Male" } } },
props: [,'name','age','sex'], received in the component template