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