动态路由:
当我们很多个页面或者组件都要被很多次重复利用的时候, 我们的路由都指向同一个组件, 这时候从不同组件进入一个 "共用" 的组件, 并且还要传参数, 渲染不同的数据
这就要用到动态路由跟路由传参了!
首先我们来了解下 router-link 这个组件:
简单来说, 它是个导航器, 利用 to 属性导航到目标组件, 并且在渲染的时候会自动生成一个 a 标签, 当然官方也有说明, 加个 tag 标签属性就可以渲染不同的标签, 可以浏览器端查看到
并且当一个导航器被激活的时候, 会自动加上一个 CSS 的激活样式, 可以全局在路由配置中设置 linkActiveClass 属性, 属性名就是样式 css 名, 一般写为 active
现在基本了解了 router-link, 先讲一下动态路由配置吧
我们在配置路由的时候, 将目标组件的路径先配置好, 如:
比如多个路由都要进入 List 组件, 这时候在配置路由路径后加个: id(id 可随便取名, 标识), 这个属性 id 可以在 $route.params.id 中获取, 例如:
当前这个 child 组件要进入, 以上配置的 id 就等于 on; 这时候在 List 组件中打印出 $route.params.id 就可以得到这个属性值 on
这个时候, 不同组件进入同一目标组件时就可以得到标识跟备注了, 也可以利用这个来传递一些正常的参数
接着往下看, 带参数的路由, 跟获取传来的参数值
当 router-link 被激活点击时, 会将当前的 to 的值 push 到 router 对象当中 (路由栈), 所以这个值可以是 string 也可以是 obj
传参数的时候, 我们就写成对象的形式, 用到 v-bind 的 js 表达式
此时整个的理解可以为: 我是 child 组件过来的, 而且我还带来了我的名字, 我叫 child
在 List 组件当中去获取这个参数值跟 id 的值
如果是不同的组件过来的, 可以设置不同的 id 值, 只要在目标组件获取属性 id 的值就可以了, 参数就利用 query. 属性值来获取.
总结
以上所述是小编给大家介绍的 vue 动态路由配置及路由传参的方式, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/140647.htm