详解vue-router 2.0 常用基础知识点之router-link


Posted in Javascript onMay 10, 2017

前端采用前后端分离的方式进行开发,我们使用vue2.0框架,做单页面应用难免会用到vue-router,今天把项目中的用到router-link摘出来,一是想整理一下这些用法,方便下次快速查找,二是重新再过一下vue-router,增加熟悉度。也希望下面这些例子能帮到其他使用vue-router的朋友。

1,$route.params

类型: Object

一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象。

path: '/detail/:id' 动态路径参数 以冒号开头

const routes = [
 {path: '/detail/:id', component: Detail, name: 'detail', meta: {title: ''}},
 {path: '/activity', component: Activity, name: 'activity', meta: {isNeedAuth: false, title: '活动现场'}},
];

还可以在一个路由中设置多段『路径参数』,对应的值都会设置到 $route.params 中

1个参数

模式: /user/:username

匹配路径: /user/evan

$route.params:{ username: 'evan' }

多个参数

模式: /user/:username/post/:post_id

匹配路径:/user/evan/post/123

$route.params:{ username: 'evan', post_id: 123 }

复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象:

const User = {
 template: '...',
 watch: {
 '$route' (to, from) {
  // 对路由变化作出响应...
 }
 }
}

或者像下面这样,只要$route发生变化,就可以做某事:

export default {
 data () {
 return {}
 },
 watch: {
 // 如果路由有变化,会再次执行该方法
 '$route': 'doSomeThing'
 },
 methods: {
 doSomeThing(){}
 }
}

综合案例

// 当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。
// 可以通过this.$route.params.id来取上动态的id
<router-link :to="{path: '/detail/' + this.$route.params.id}" >
此团详情
</router-link>

// 还可以用命名路由的方式:
<router-link :to="{ name: 'detail', params:{ id: this.$route.params.id }}" >
此团详情
</router-link>

// 还可以用router.push()的方式
router.push({name:'detail', params: { id: this.$route.params.id}})

// 以上三种方式都可以实现跳转,都可以通过this.$route.params来取到参数

2,$route.query

类型: Object

一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。

// 动态数据的查询参数
 export default {
  data() {
   return {
    queryData: {}
   }
  },
  created() {
   this.$http.get(url)
    .then(function (response) {
     // ...
     if (data.code == 0) {
      this.queryData.order_id = data.content.order_id;
      this.queryData.business_id = data.content.business_id;
      this.queryData.coupon_id = data.content.coupons.coupon_id;
     }
     // ...
    }, function (response) {
     // ...
    })
  },
 }

// 使用
<router-link :to="{ path: '/backend/verify_coupon', query:this.queryData }">验证抵扣券</router-link>

3,定义路由的时候可以配置 meta 字段

// 举个例子
const routes = [
 {path: '/activity', component: Activity, name: 'activity', meta: {isNeedAuth: false, title: '活动现场'}},
];

实际工作中使用的时候就可以像下面这样:

import { setTitleHack } from './utils';
import Activity from './views/activity.vue'
import Start from './views/start.vue'
// 定义路由的时候在meta中加入自定义字段
const routes = [
 {path: '/activity', component: Activity, name: 'activity', meta: {isNeedAuth: false, title: '活动现场'}},
 {path: '/start', component: Start, name: 'start', meta: {isNeedAuth: false, title: '活动现场'}},
];
const router = new VueRouter({...});
router.beforeEach((to, from, next) => {
 // 动态修改页面的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

<router-link :to="{path:'/coupon/detail/'+item.order_id, append:'true'}"></router-link>

如果上面这个路由是从home页面跳转过来,得到的结果就是/home/coupon/detail/id

5,active-class

类型: string

默认值: "router-link-active"

设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

<router-link tag="li" :to="{path:'/home', activeClass: 'bottom-nav-active'}"></router-link>

7,综合案例

// 命名路由,append 属性,查询参数,router-link渲染成<li>标签
<router-link tag="li" :to="{name:'demandindex', append:true, query: {isFormBackend: 1}, activeClass: 'bottom-nav-active'}">
</router-link>

// to的值:字符串形式
<router-link to="banner.image_url" ></router-link>

// to的值:对象形式,拼接多个动态参数
<router-link :to="{path: '/my/modify?modify=fullname&val=' + profile.nickname}" ></router-link>

// to的值:对象形式
<router-link :to="{path: '/home'}">返回首页</router-link>

// to的值:对象形式,拼接动态参数
<router-link to="{path: '/backend/coupon_order_detail/' + product.order_id+'?order_status='+product.order_status}"></router-link>

// to的值:对象形式,带一个路径参数
<router-link :to="{path: '/detail/' + this.$route.params.id}" ></router-link>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
JavaScript使用readAsDataURL读取图像文件
May 10 #Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 #Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 #Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 #Javascript
JavaScript通过filereader接口读取文件
May 10 #Javascript
关于vue-router路径计算问题
May 10 #Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 #Javascript
You might like
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python通过select实现异步IO的方法
2015/06/04 Python
python基础教程之Filter使用方法
2017/01/17 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
Python with语句用法原理详解
2020/07/03 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
感恩教师节演讲稿
2014/09/03 职场文书
好媳妇事迹材料
2014/12/24 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android