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

更新时间：2022年08月05日 10:33:46 作者：IT利刃出鞘

这篇文章主要介绍了Vue--Router动态路由的用法,很多时候，我们需要将给定匹配模式的路由映射到同一个组件，在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为路径参数，本文对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动态路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue中如何使用vue-touch插件
这篇文章主要介绍了vue中使用vue-touch插件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-07-07
JavaScript之实现一个简单的Vue示例
这篇文章主要介绍了JavaScript之实现一个简单的Vue示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
vue.js 图片上传并预览及图片更换功能的实现代码
这篇文章主要介绍了vue.js 图片上传并预览及图片更换功能，小编主要围绕我们日常使用功能的例子做讲解，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-08-08
vue实现购物车完整功能
这篇文章主要为大家详细介绍了vue实现购物车完整功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
Vue-Cli中自定义过滤器的实现代码
本篇文章主要介绍了Vue-Cli中自定义过滤器的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
Vue常用的修饰符及应用场景解读
这篇文章主要介绍了Vue常用的修饰符及应用场景解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vite 项目中如何使用Sass
Vite默认集成了对Sass的支持,你只需要安装Sass本身即可,这篇文章主要介绍了vite 项目中如何使用Sass,需要的朋友可以参考下
2024-04-04
vue2.0 自定义日期时间过滤器
本文给大家带来两种方法实现vue2.0 自定义日期时间过滤器，需要的的朋友参考下吧
2017-06-06
在vue中使用Autoprefixed的方法
这篇文章主要介绍了在vue中使用Autoprefixed的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
这篇文章主要介绍了如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12