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

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

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

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

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

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' ]

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: '[^\\/]+?' } ]

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