前端采用前后端分离的方式进行开发，我们使用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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue  # router  # link  # vue2.0  # vue.js  # 详解vue中router-link标签所必备了解的属性  # vue router-link传参以及参数的使用实例  # vue路由跳转router-link清除历史记录的三种方式(总结)  # vue router-link 默认a标签去除下划线的实现  # Vue 页面跳转不用router-link的实现代码  # Vue中router-link常用属性使用案例讲解  # 可以通过  # 如果没有  # 多个  # 可以用  # 自定义  # 跳转  # 就可以  # 默认值  # 还可以  # 你可以  # 一是  # 则是  # 是从  # 三种  # 可以实现  # 来做  # 则在  # 首页  # 再过  # 则为 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何快速生成专业多端适配建站电话？  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  Laravel如何使用Facades（门面）及其工作原理_Laravel门面模式与底层机制  Laravel的Blade指令怎么自定义_创建你自己的Laravel Blade Directives  Laravel如何使用Telescope进行调试？（安装和使用教程）  Laravel怎么导出Excel文件_Laravel Excel插件使用教程  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  如何在IIS中新建站点并配置端口与物理路径？  如何在 React 中条件性地遍历数组并渲染元素  iOS验证手机号的正则表达式  开心动漫网站制作软件下载,十分开心动画为何停播？  如何在阿里云完成域名注册与建站？  Laravel如何创建自定义Facades？（详细步骤）  如何在阿里云部署织梦网站？  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  小米17系列还有一款新机？主打6.9英寸大直屏和旗舰级影像  html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】  用yum安装MySQLdb模块的步骤方法  如何在IIS中新建站点并解决端口绑定冲突？  如何快速搭建安全的FTP站点？  Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践  Laravel的HTTP客户端怎么用_Laravel HTTP Client发起API请求教程  瓜子二手车官方网站在线入口 瓜子二手车网页版官网通道入口  Angular 表单中正确绑定输入值以确保提交与验证正常工作  高性能网站服务器配置指南：安全稳定与高效建站核心方案  微信公众帐号开发教程之图文消息全攻略  如何在腾讯云免费申请建站？  如何用已有域名快速搭建网站？  Laravel路由Route怎么设置_Laravel基础路由定义与参数传递规则【详解】  Python文件操作最佳实践_稳定性说明【指导】  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  Laravel如何配置Horizon来管理队列？（安装和使用）  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  Laravel如何使用Service Container和依赖注入？（代码示例）  如何在自有机房高效搭建专业网站？  Swift开发中switch语句值绑定模式  Laravel怎么实现搜索高亮功能_Laravel结合Scout与Algolia全文检索【实战】  javascript中的数组方法有哪些_如何利用数组方法简化数据处理  如何构建满足综合性能需求的优质建站方案？  Laravel如何实现用户密码重置功能？（完整流程代码）  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？  香港服务器WordPress建站指南：SEO优化与高效部署策略  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  Laravel如何实现数据导出到CSV文件_Laravel原生流式输出大数据量CSV【方案】  Laravel的.env文件有什么用_Laravel环境变量配置与管理详解  Laravel中的withCount方法怎么高效统计关联模型数量  Laravel中间件如何使用_Laravel自定义中间件实现权限控制