文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue--Router动态路由的用法示例详解

2022-11-13 14:25

关注

本文介绍Vue-Router中动态路由的用法。

官网网址

Vue官网:带参数的动态路由匹配 | Vue Router

动态路由概述

说明

很多时候,我们需要将给定匹配模式的路由映射到同一个组件。例如,我们可能有一个 User 组件,它应该对所有用户进行渲染,但用户 ID 不同。在 Vue Router 中,我们可以在路径中使用一个动态字段来实现,我们称之为 路径参数 。

路径参数 用冒号(:) 表示。当一个路由被匹配时,它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。

示例

const User = {
  template: '<div>User</div>',
}
 
// 这些都会传递给 `createRouter`
const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]

现在像 /users/johnny 和 /users/jolyne 这样的 URL 都会映射到同一个路由。可以通过更新 User 的模板来呈现当前的用户 ID:

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
}

同一路由多个参数

可以在同一个路由中设置有多个 路径参数,它们会映射到 $route.params 上的相应字段。

例如:

匹配模式

匹配路径

$route.params

/users/:username

/users/eduardo

{ username: 'eduardo' }

/users/:username/posts/:postId

/users/eduardo/posts/123

{ username: 'eduardo', postId: '123' }

path-to-regexp

简介

说明

vue-router底层是通过path-to-regexp来实现的路径参数。

该工具库用来处理 url 中地址与参数,能够很方便得到我们想要的数据。

js 中有 RegExp 方法做正则表达式校验,而 path-to-regexp 可以看成是 url 字符串的正则表达式。

官网网址

github:GitHub - pillarjs/path-to-regexp at v1.7.0

github用法翻译:path-to-regexp介绍

在线测试:Express Route Tester

Api用法

npm install path-to-regexp
const pathToRegexp = require('path-to-regexp');

1. pathToRegexp()

作用:这里这个方法可以类比于 js 中 new ExpReg('xxx')。

var pathToRegexp = require('path-to-regexp')
var re = pathToRegexp('/foo/:bar')
console.log(re);    
// /^\/foo\/((?:[^\/]+?))(?:\/(?=$))?$/i

2、exec()

作用:匹配 url 地址与规则是否相符。

url路径与匹配规则不相符返回 null, 与匹配规则相符,返回一个数组。

var pathToRegexp = require('path-to-regexp')
var re = pathToRegexp('/foo/:bar');     // 匹配规则
var match1 = re.exec('/test/route');    // url 路径
var match2 = re.exec('/foo/route');     // url 路径
console.log(match1); //null
console.log(match2); //[ '/foo/route', 'route', index: 0, input: '/foo/route' ]

3. parse()

作用:解析 url 字符串中的参数部分(:id)

返回一个数组,可得到 url 地址携带参数的属性名称(item.name)。

url 中携带参数出了 :id 这种形式,还有 /user?id=11 这种,使用 parse() 方法解析自行查看结果

var pathToRegexp = require('path-to-regexp');
var url = '/user/:id';
console.log(pathToRegexp.parse(url));
//[ '/user',{ name: 'id', prefix: '/',delimiter: '/',optional: false, repeat: false, partial: false, pattern: '[^\\/]+?' } ]

4. compile()

作用:快速填充 url 字符串的参数值。

var pathToRegexp = require('path-to-regexp')
 
var url = '/user/:id/:name'
var data = {id: 10001, name: 'bob'}
console.log(pathToRegexp.compile(url)(data)); // /user/10001/bob

到此这篇关于Vue--Router动态路由的用法的文章就介绍到这了,更多相关VueRouter动态路由内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯