快捷導(dǎo)航

Vue--Router動(dòng)態(tài)路由的用法示例詳解

更新時(shí)間：2022年08月05日 10:33:46 作者：IT利刃出鞘

這篇文章主要介紹了Vue--Router動(dòng)態(tài)路由的用法,很多時(shí)候，我們需要將給定匹配模式的路由映射到同一個(gè)組件，在?Vue?Router?中，我們可以在路徑中使用一個(gè)動(dòng)態(tài)字段來(lái)實(shí)現(xiàn)，我們稱(chēng)之為路徑參數(shù)，本文對(duì)Vue?Router動(dòng)態(tài)路由相關(guān)知識(shí)給大家介紹的非常詳細(xì)，需要的朋友參考下吧

官網(wǎng)網(wǎng)址

Vue官網(wǎng)：帶參數(shù)的動(dòng)態(tài)路由匹配 | Vue Router

動(dòng)態(tài)路由概述

說(shuō)明

很多時(shí)候，我們需要將給定匹配模式的路由映射到同一個(gè)組件。例如，我們可能有一個(gè) User 組件，它應(yīng)該對(duì)所有用戶(hù)進(jìn)行渲染，但用戶(hù) ID 不同。在 Vue Router 中，我們可以在路徑中使用一個(gè)動(dòng)態(tài)字段來(lái)實(shí)現(xiàn)，我們稱(chēng)之為路徑參數(shù) 。

路徑參數(shù) 用冒號(hào)（:）表示。當(dāng)一個(gè)路由被匹配時(shí)，它的 params 的值將在每個(gè)組件中以 this.$route.params 的形式暴露出來(lái)。

示例

const User = {
  template: '<div>User</div>',
}
 
// 這些都會(huì)傳遞給 `createRouter`
const routes = [
  // 動(dòng)態(tài)字段以冒號(hào)開(kāi)始
  { path: '/users/:id', component: User },
]

現(xiàn)在像 /users/johnny 和 /users/jolyne 這樣的 URL 都會(huì)映射到同一個(gè)路由?？梢酝ㄟ^(guò)更新 User 的模板來(lái)呈現(xiàn)當(dāng)前的用戶(hù) ID：

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

同一路由多個(gè)參數(shù)

可以在同一個(gè)路由中設(shè)置有多個(gè) 路徑參數(shù)，它們會(huì)映射到 $route.params 上的相應(yīng)字段。

例如：

匹配模式	匹配路徑	$route.params
/users/:username	/users/eduardo	{ username: 'eduardo' }
/users/:username/posts/:postId	/users/eduardo/posts/123	{ username: 'eduardo', postId: '123' }

path-to-regexp

簡(jiǎn)介

說(shuō)明

vue-router底層是通過(guò)path-to-regexp來(lái)實(shí)現(xiàn)的路徑參數(shù)。

該工具庫(kù)用來(lái)處理 url 中地址與參數(shù)，能夠很方便得到我們想要的數(shù)據(jù)。

js 中有 RegExp 方法做正則表達(dá)式校驗(yàn)，而 path-to-regexp 可以看成是 url 字符串的正則表達(dá)式。

官網(wǎng)網(wǎng)址

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

github用法翻譯：path-to-regexp介紹

在線測(cè)試：Express Route Tester

Api用法

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

1. pathToRegexp()

作用：這里這個(gè)方法可以類(lèi)比于 js 中 new ExpReg('xxx')。

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

2、exec()

作用：匹配 url 地址與規(guī)則是否相符。

url路徑與匹配規(guī)則不相符返回 null, 與匹配規(guī)則相符，返回一個(gè)數(shù)組。

var pathToRegexp = require('path-to-regexp')
var re = pathToRegexp('/foo/:bar');     // 匹配規(guī)則
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 字符串中的參數(shù)部分（:id）

返回一個(gè)數(shù)組，可得到 url 地址攜帶參數(shù)的屬性名稱(chēng)（item.name）。

url 中攜帶參數(shù)出了 :id 這種形式，還有 /user?id=11 這種，使用 parse() 方法解析自行查看結(jié)果

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 字符串的參數(shù)值。

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

到此這篇關(guān)于Vue--Router動(dòng)態(tài)路由的用法的文章就介紹到這了,更多相關(guān)VueRouter動(dòng)態(tài)路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: