The route navigation function implemented in the article Using vue-router to complete simple navigation functions cannot pass parameters, which means it is a static route. Since the routing mode that can pass parameters can pass parameters, the number of corresponding routes is uncertain, so it is called dynamic routing.
So how to use parameters as routes?
Add
:in front of the parameter name, and then write the parameters in thepathof the route
The following example:
routes: [ //将页面组件与path指令的路由关联
{ name: 'BookInfo', path: '/books/:id', component: BookInfo }
]After this definition, vue-router will match all: /books/1,/books/2,/books/3..., so It is said that the number of routes defined in this way is undefined.
In<router-link> we add a params attribute to specify the specific parameter value
<li>
<router-link :to ="{name:'BookInfo',params :{id:1}}" >
<p>首页</p>
</router-link>
</li>The above link corresponds to: http://localhost:8080/__dirname/books/1
If you need to pass in multiple parameter values, just follow the naming method above to add parameters and pass the corresponding declared parameter values in params That’s it. As long as vue-router matches the definition of the routing mode, it will automatically decompose the parameters and take values
For example,path: '/books/version/:id', then the correspondingparamsis:params :{id:1,version:1}
So now we are faced with this problem - how to read this parameter value from the routing?
Answer: Get the specified parameter value through the $route.params attribute, such as: this.$route.params.id,this.$route.params .msg
If you want to output the parameter value in the corresponding component page, the corresponding code is as follows:
<p>当前图书编号是：{{$route.params.id}}</p>If you want to do it based on the parameter value in the js code For corresponding processing, add the following code to the default route:
export default { name: "app", created() { alert(this.$route.params.id); }};When using routing parameters, such as from
/books/1to/books/2, the original component instance will be reused, because both routes render the same component, and the reuse rate will be higher than destroying and recreating it.
This means that the component's life cycle hook will no longer be called (the component is not destroyed and then created), that is,created mountedand other hook functions are loaded when the page is loaded for the second time. Return to invalid.
Then, when reusing components, if you want to respond to changes in routing parameters, you need to add $ to the $watch object. route Tracking function for object changes
<script>
export default { name: "app",
watch :{
'$route' (to,from){
alert(to.params.id);
}
}
};
</script>The following code (
$route.paramsThe defined parameters must be part of the entire route,vue -routeralso allows us to pass parameters using"/path?param = value", and we can use$route.query.parameter nameto get the parameter value
vue-routeralso provides a constant parameter definitionmeta. We can first define the value ofmetain the routing definition, and then pass ## in the routing instance. #$route.metaParameters get specific constant values.
$route.query.Parameter name)
{ name: 'BookInfo', path: '/books/:id/?bookName=Lost', component: BookInfo }bookName is this.$route.query.msg
$route.meta.Parameter name)
{ name: 'BookInfo', path: '/books/:id', component: BookInfo ,meta: { bookName : 'Lost In River' }}bookName The value code is this.$route.meta.bookName
dynamic routing
So what? What about using parameters as routes?AddThe following example::
in front of the parameter name, and then write the parameters in thepathof the route
routes: [ //将页面组件与path指令的路由关联
{ name: 'BookInfo', path: '/books/:id', component: BookInfo }
]vue-router will match all: /books/1,/books/2,/books/3..., so It is said that the number of routes defined in this way is undefined.
<router-link> we add a params attribute to specify the specific parameter value
<li>
<router-link :to ="{name:'BookInfo',params :{id:1}}" >
<p>首页</p>
</router-link>
</li>If you need to pass in multiple parameter values, just follow the naming method above to add parameters and pass the corresponding declared parameter values in params That’s it. As long as vue-router matches the definition of the routing mode, it will automatically decompose the parameters and take valuesFor example,
path: '/books/version/:id', then the correspondingparamsis:params :{id:1,version:1}
Answer: Get the specified parameter value through the
$route.params attribute, such as: this.$route.params.id,this.$route.params .msg
<p>当前图书编号是：{{$route.params.id}}</p>如果想在js代码中根据参数值做相应的处理，则在默认路由中加入如下代码：
export default { name: "app", created() { alert(this.$route.params.id); }};当使用路由参数的时候，如 从
/books/1到/books/2，原来的组件实例会被复用，因为两个路由都渲染同一个组件，比起销毁后再创建，复用的销率会更高。
这也就是说 组件的生命周期钩子不会再被调用(组件没有被销毁后再创建) ，即created mounted等钩子函数在页面第二次加载的时候回失效。
那么，当复用组件时候，想对路由参数的变化做出响应的话，就需要在 $watch 对象内添加对 $route 对象变化的跟踪函数
<script>
export default { name: "app",
watch :{
'$route' (to,from){
alert(to.params.id);
}
}
};
</script>
$route.params定义的参数必然是整个路由的其中一部分，vue-router还可以让我们使用"/path?param = value"的方式传递参数，可以使用$route.query.参数名获取参数值vue-router还提供一种常量参数定义meta，我们可以在路由定义中先定义meta的值，然后在路由实例中通过$route.meta参数获取具体常量值。
如下代码（$route.query.参数名）
{ name: 'BookInfo', path: '/books/:id/?bookName=Lost', component: BookInfo }获取其中 bookName 的值的代码为 this.$route.query.msg
如下代码（$route.meta.参数名）
{ name: 'BookInfo', path: '/books/:id', component: BookInfo ,meta: { bookName : 'Lost In River' }}获取其中 bookName 的值的代码为 this.$route.meta.bookName
相关推荐：
The above is the detailed content of Detailed explanation of dynamic routing examples in Vue.js. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
