详解vue-router 2.0 常用基础知识点之router-link
|
前端采用前后端分离的方式进行开发，我们使用vue2.0框架，做单页面应用难免会用到vue-router，今天把项目中的用到router-link摘出来，一是想整理一下这些用法，方便下次快速查找，二是重新再过一下vue-router，增加熟悉度。也希望下面这些例子能帮到其他使用vue-router的朋友。 1，$route.params类型: Object 一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。 path: '/detail/:id' 动态路径参数 以冒号开头 还可以在一个路由中设置多段『路径参数』，对应的值都会设置到 $route.params 中 1个参数模式： /user/:username 匹配路径： /user/evan 多个参数模式： /user/:username/post/:post_id 匹配路径：/user/evan/post/123 复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象： 或者像下面这样，只要$route发生变化，就可以做某事： 综合案例
此团详情
// 还可以用命名路由的方式： // 还可以用router.push()的方式 // 以上三种方式都可以实现跳转，都可以通过this.$route.params来取到参数 2，$route.query类型: Object 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。 // 使用
<router-link :to="{ path: '/backend/verify_coupon',query:this.queryData }">验证抵扣券 3，定义路由的时候可以配置 meta 字段实际工作中使用的时候就可以像下面这样： {
// 动态修改页面的title
setTitleHack(to.meta.title);
// 根据自定义的路由元信息来做判断：
if (to.meta.isNeedAuth !== false) {
// do something
} else {
// do something
}
next();
});
4，append设置 append 属性后，则在当前（相对）路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b 代码如下: 如果上面这个路由是从home页面跳转过来，得到的结果就是/home/coupon/detail/id 5，active-class类型: string 默认值: "router-link-active" 设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。 代码如下: 7，综合案例标签
// to的值：字符串形式 // to的值：对象形式，拼接多个动态参数 // to的值：对象形式 // to的值：对象形式，拼接动态参数 // to的值：对象形式，带一个路径参数 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |