Home > Article > Web Front-end > Detailed explanation of dynamic routing examples in Vue.js
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 thepath
of 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.
Inb988a8fd72e5e0e42afffd18f951b277
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 correspondingparams
is: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/1
to/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 mounted
and 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.params
The defined parameters must be part of the entire route,vue -router
also allows us to pass parameters using"/path?param = value"
, and we can use$route.query.parameter name
to get the parameter value
vue-router
also provides a constant parameter definitionmeta
. We can first define the value ofmeta
in 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 }The code to obtain the value of
bookName is
this.$route.query.msg
$route.meta.Parameter name)
{ name: 'BookInfo', path: '/books/:id', component: BookInfo ,meta: { bookName : 'Lost In River' }}Get the
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 the
pathof the route
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.
b988a8fd72e5e0e42afffd18f951b277 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 valuesFor example,
path: '/books/version/:id', then the corresponding
paramsis:
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!