Vue--Router動態路由的用法範例詳解

2022-08-05 14:00:45

官網網址

動態路由概述

說明

很多時候，我們需要將給定匹配模式的路由對映到同一個元件。例如，我們可能有一個 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動態路由內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue--Router動態路由的用法範例詳解

目錄

官網網址

動態路由概述

同一路由多個引數

path-to-regexp

Api用法

1. pathToRegexp()

2、exec()

3. parse()

4. compile()

熱門文章