你可能不清楚的 Vue Router 深度用法(二)
此为 Vue Router 深度用法的第二篇,主要讲述动态路由匹配用法。第一篇的链接在此: https://segmentfault.com/a/11...
动态路由匹配是用于把某种模式匹配到的所有路由,全都映射到同个组件。通过给路由路径一个变量,即变成动态路由,把变化的内容赋值给变量即可。
例如文章详情页是一个组件,只有一个路由,从文章列表页点进来,变化的只是文章 id 而已。将其赋予给设定的变量,然后通过 watch '$route' 或者使用 beforeRouteUpdate 导航守卫监测路由变化,传递新的文章 id 获取文章详情即可。在组件里,可以通过 this.$route.params.xx 获取当前文章 id。
一个路由地址可以设置多个变量,适合有分叉情况的内容。例如 path: '/params/:foo/:bar'
从文章列表页点进来即传递路由变量,有三种方法:
(1)<router-link to="/params/list/1">跳转到 /params/list/1</router-link>
(2)this.$router.push({ name: 'articles', params: { foo: 'list', bar: 1 } })
(3)this.$router.push({ path: '/params/list/1' }) // path 不能与 params 同时使用
高级匹配模式
这里主要研究的是动态路由匹配的高级匹配模式,以达到合并差异不大的路由、减少路由数量的目的。
高级匹配即结合简单的正则匹配方法,给予路由更多的限制和操作空间。
1、可选路由参数
路由参数可选,添加与否都对应同一个组件。可以在组件里使用 v-if / v-show 结合 $route.params.xx 展现不同的内容
// a param can be made optional by adding "?"
{ path: '/optional-params/:foo?' }// 这两个链接都对应同个组件
<li><router-link to="/optional-params">/optional-params</router-link></li>
<li><router-link to="/optional-params/foo">/optional-params/foo</router-link></li>
2、精确匹配参数
只有参数通过正则匹配,完全符合格式,才能会跳转。例如只有参数是数字/手机号才允许跳转。适用于对第三方不规范格式的数据进行筛选。
// a param can be followed by a regex pattern in parens
// this route will only be matched if :id is all numbers
{ path: '/params-with-regex/:id(\\d+)' }
// 只匹配数字
<li><router-link to="/params-with-regex/123">/params-with-regex/123</router-link></li>// 只匹配手机号
{ path: '/params-with-regex/:id(^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$)' }
<li><router-link to="/params-with-regex/13800138000">/params-with-regex/13800138000</router-link></li>
3、匹配任意参数
不对参数格式、数量进行限制,任意参数都可。
// asterisk can match anything
{ path: '/asterisk/*' }// 这两个都是同一组件
<li><router-link to="/asterisk/foo">/asterisk/foo</router-link></li>
<li><router-link to="/asterisk/foo/bar">/asterisk/foo/bar</router-link></li>
4、部分可选参数
结合可选路由参数与多路由参数,其中一部分参数可选。适用于分叉情况下不确定参数数量的情况。
// make part of the path optional by wrapping with parens and add "?"
{ path: '/optional-group/(foo/)?bar' }// 这两个都是同一组件
<li><router-link to="/optional-group/bar">/optional-group/bar</router-link></li>
<li><router-link to="/optional-group/foo/bar">/optional-group/foo/bar</router-link></li>
你可能不清楚的 Vue Router 深度用法(二)相关推荐
- 你可能不清楚的 Vue Router 深度用法(一)
Vue Router 简单易上手,能实现大部分的需求.但是,如果在项目里需要更细致的控制路由,以实现与其同步的效果,就需要挖掘其文档里没详细提及的内容.第一章为路由元信息用途挖掘. 路由元信息用途 ( ...
- vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析 一.Vue.js实例 在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...
- 【Vue.js】Vue.js中常用的UI组件库和Vue Router
1.Vue生态中常用的UI组件库 1. vant 介绍 轻量级.可靠的移动端 Vue 组件库 有赞前端团队出品 GitHub地址:https://github.com/youzan/vant 特性 拥 ...
- Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战 前言 一.什么是单页面应用及实现前端路 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...
昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...
- Vue | Vue Router 路由的使用
文章目录 一.路由的基本使用 1.创建 Vue 项目并引入 vue-router 2.编写 Components 组件 3.编写路由文件 4.在主文件 Main.js 中引入路由 5.添加 route ...
- VueJS 官方路由之 Vue Router
文章目录 参考 描述 Vue Router 获取 npm yarn 依赖问题 使用 router-link router-view 配置路由插件 基本结构 子组件 导入需要进行路由匹配的组件 定义路由 ...
- Vue源码 Vue Router(三)matcher 路由匹配器
Vue源码 Vue Router(三)matcher Vue源码 Vue Router(三)matcher matcher createMatcher addRoutes match 总结 单步调试参 ...
- 面试考问Vue Router 的路由模式,这个回答令我直接出局!
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
最新文章
- 项目安排(离散化+DP)
- Spring Boot Actuator
- [转]掌控像素的虚实
- VTK:Points之ExtractSurface
- Cloud for Customer的第一个显示的work center是怎么加载和渲染的
- openapi回调地址请求不通过_必看!OpenAPI知识来了!
- 复杂多目录的Makefile模板及示例-转
- 闭包 进阶 javascript
- C语言 static静态变量
- 防止mdf文件被非法附加后修改的一个简单实现方案
- 哈工大密码学实验CA
- 搭建国外海外多语言一元云购软件夺宝购商城网站
- 微信 分享领券 php,微信卡券货架显示已领取
- Switch使用方法
- 数据库—Mysql相关
- 20年intel版mac升级Monterey
- C++语言程序设计(郑莉)02 C++基本数据类型和表达式
- 01.Win10修改用户名及user文件名称的一波三折
- 马尔科夫随机场简单理解
- 特来电最新财务数据曝光:年亏7770万,与星星充电争抢上市
热门文章
- 全球及中国在线总有机碳分析仪行业竞争趋势与投资动态建议报告2022版
- chrome Native Client 让你可以使用 C 以及 C++ 语言开发 Web 应用
- HTTP代理如何正确处理Cookie(1)
- 【美文欣赏】人人都有难念的经
- oracle安装就是home3,rhel3上安装Oracle(来自Oracle网站)
- 5界面怎么做窗帘拉动的效果_别让土味窗帘毁了你的家
- 世界种业并购史 国际农民丰收节贸易会起底农化巨头构架
- 互联互通谋定贸易伙伴 国际农民丰收节贸易会品牌发展
- 中非谋定农业合作 -农业大健康·万祥军:提供农业解决方案
- 有什么值得推荐的Java Web练手项目?