Vue dynamic routing configuration vue routing parameters --scallopsF

Dynamic routing:

		当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都只想同一个组件,这时候从不同组件进入一个“共用”的组件,并且还要传递参数,渲染不同数据
		这就要用到动态路由跟路由传参了!
		首先我们来了解下router-link这个组件:
		简单来说,他是个导航器,利用to属性导航到目标组件,并且渲染的时候会自动生成一个a标签,当然官方也有说明,加个tag标签属性就可以渲染不同的标签,可以浏览器端查看到
		并且当一个导航器被激活的时候,会自动加上一个css的激活样式,可以全局在路由配置中设置linkActiveClass属性,属性名就是样式css名,一般写为active
		现在基本了解了rouer-link,先讲一下动态路由配置吧
		我们在配置路由的时候,将目标组件的路径先配置好,如:

insert image description here
For example, multiple routes must enter the List component. At this time, after configuring the routing path, add: id (the id can be named and identified at will). This attribute id can be obtained in $route.params.id, for example: the current
insert image description here
child To enter the component, the id of the above configuration is equal to on; at this time, print out ¥route.params.id in the list component to get the attribute value on. At this time, insert image description here
when different components enter the same target component, they can get the identification and remarks. , you can also use this to pass some normal parameters.
Then look down, the route with parameters, and get the passed parameter value.
When the router-link is activated and clicked, the current to value will be pushed to the router object ( There is a stack on the road), so this value can be string or obj when passing parameters, we write it in the form of an object, and use the v-bind js expression at this time The whole understanding can be as follows: I wet the child insert image description here
component , and I also brought my name, my name is child, to get the parameter value and id value in the List component.
insert image description here
insert image description here
If it comes from a different component, you can set a different id value, as long as you get the attribute id in the target component The value is enough, and the parameter is obtained by using the query. attribute value

Guess you like

Origin blog.csdn.net/weixin_50407990/article/details/111873635