Vue Router动态路由
IT利刃出鞘 人气:0本文介绍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
加载全部内容