Vue router 正则表达式限制路由传参

今天梅子问我
Vue router 里 path: “/redirect/:path(.*)” 是什么意思?

认真看了下, 有 “path:” 和 “/:” 应该是动态路由
可 (.*) 是什么东西?
哎呀, 这个我不知道呀!
被梅子发现我这么无知, 面子都不要了, 此时此刻必须冷静并保持英俊

“这个嘛, 我研究一下”

根据经验, 有 “.” 和 “*” 这两个符号, 很大机会是正则表达式
于是上 Vue router 官网搜 “正则”
果然在 “高级匹配模式” 篇找到了相关资料

---

正文

路由传参时, 在 path 声明变量名 path: “/foo/:name”
路由模板里用 $route.params.name 即可取到传递的值

其实除了变量名, 还可以通过正则表达式对变量值作限制
path: “/foo/:name(正则表达式)”

// name 为1位0到9的数字时才能匹配
// 例 #/foo/5
{
   
	path: "/foo/:name([0-9])"