网站源码商城,微网站地图定位,wordpress字母索引,网站文章采集带参数的动态路由匹配 很多时候#xff0c;我们需要将给定匹配模式的路由映射到同一个组件。例如#xff0c;我们可能有一个 User 组件#xff0c;它应该对所有用户进行渲染#xff0c;但用户 ID 不同。在 Vue Router 中#xff0c;我们可以在路径中使用一个动态字段来实现…带参数的动态路由匹配 很多时候我们需要将给定匹配模式的路由映射到同一个组件。例如我们可能有一个 User 组件它应该对所有用户进行渲染但用户 ID 不同。在 Vue Router 中我们可以在路径中使用一个动态字段来实现我们称之为 路径参数
const User {template: divUser/div,
}// 这些都会传递给 createRouter
const routes [// 动态字段以冒号开始{ path: /users/:id, component: User },
]现在像 /users/johnny 和 /users/jolyne 这样的 URL 都会映射到同一个路由。
路径参数 用冒号 : 表示。当一个路由被匹配时它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此我们可以通过更新 User 的模板来呈现当前的用户 ID
const User {template: divUser {{ $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 }
除了 $route.params 之外$route 对象还公开了其他有用的信息如 $route.query如果 URL 中存在参数、$route.hash 等。你可以在 API 参考中查看完整的细节。
这个例子的 demo 可以在这里找到。 响应路由参数的变化 使用带有参数的路由时需要注意的是当用户从 /users/johnny 导航到 /users/jolyne 时相同的组件实例将被重复使用。因为两个路由都渲染同个组件比起销毁再创建复用则显得更加高效。不过这也意味着组件的生命周期钩子不会被调用。
要对同一个组件中参数的变化做出响应的话你可以简单地 watch $route 对象上的任意属性在这个场景中就是 $route.params
const User {template: ...,created() {this.$watch(() this.$route.params,(toParams, previousParams) {// 对路由变化做出响应...})},
}或者使用 beforeRouteUpdate 导航守卫它也可以取消导航
const User {template: ...,async beforeRouteUpdate(to, from) {// 对路由变化做出响应...this.userData await fetchUser(to.params.id)},
}捕获所有路由或 404 Not found 路由 常规参数只匹配 url 片段之间的字符用 / 分隔。如果我们想匹配任意路径我们可以使用自定义的 路径参数 正则表达式在 路径参数 后面的括号中加入 正则表达式 :
const routes [// 将匹配所有内容并将其放在 $route.params.pathMatch 下{ path: /:pathMatch(.*)*, name: NotFound, component: NotFound },// 将匹配以 /user- 开头的所有内容并将其放在 $route.params.afterUser 下{ path: /user-:afterUser(.*), component: UserGeneric },
]在这个特定的场景中我们在括号之间使用了自定义正则表达式并将pathMatch 参数标记为可选可重复。这样做是为了让我们在需要的时候可以通过将 path 拆分成一个数组直接导航到路由
this.$router.push({name: NotFound,// 保留当前路径并删除第一个字符以避免目标 URL 以 // 开头。params: { pathMatch: this.$route.path.substring(1).split(/) },// 保留现有的查询和 hash 值如果有的话query: this.$route.query,hash: this.$route.hash,
})更多内容请参见重复参数部分。
如果你正在使用历史模式请务必按照说明正确配置你的服务器。
高级匹配模式
Vue Router 使用自己的路径匹配语法其灵感来自于 express因此它支持许多高级匹配模式如可选的参数零或多个 / 一个或多个甚至自定义的正则匹配规则。请查看高级匹配文档来探索它们。
路由的匹配语法 大多数应用都会使用 /about 这样的静态路由和 /users/:userId 这样的动态路由就像我们刚才在动态路由匹配中看到的那样但是 Vue Router 可以提供更多的方式
:::tip 为了简单起见所有的路由都省略了 component 属性只关注 path 值。 :::
在参数中自定义正则
当定义像 :userId 这样的参数时我们内部使用以下的正则 ([^/]) (至少有一个字符不是斜杠 / )来从 URL 中提取参数。这很好用除非你需要根据参数的内容来区分两个路由。想象一下两个路由 /:orderId 和 /:productName两者会匹配完全相同的 URL所以我们需要一种方法来区分它们。最简单的方法就是在路径中添加一个静态部分来区分它们
const routes [// 匹配 /o/3549{ path: /o/:orderId },// 匹配 /p/books{ path: /p/:productName },
]但在某些情况下我们并不想添加静态的 /o /p 部分。由于orderId 总是一个数字而 productName 可以是任何东西所以我们可以在括号中为参数指定一个自定义的正则
const routes [// /:orderId - 仅匹配数字{ path: /:orderId(\\d) },// /:productName - 匹配其他任何内容{ path: /:productName },
]现在转到 /25 将匹配 /:orderId其他情况将会匹配 /:productName。routes 数组的顺序并不重要!
:::tip 确保转义反斜杠( \ )就像我们对 \d (变成\\d)所做的那样在 JavaScript 中实际传递字符串中的反斜杠字符。 :::
可重复的参数
如果你需要匹配具有多个部分的路由如 /first/second/third你应该用 *0 个或多个和 1 个或多个将参数标记为可重复
const routes [// /:chapters - 匹配 /one, /one/two, /one/two/three, 等{ path: /:chapters },// /:chapters - 匹配 /, /one, /one/two, /one/two/three, 等{ path: /:chapters* },
]这将为你提供一个参数数组而不是一个字符串并且在使用命名路由时也需要你传递一个数组
// 给定 { path: /:chapters*, name: chapters },
router.resolve({ name: chapters, params: { chapters: [] } }).href
// 产生 /
router.resolve({ name: chapters, params: { chapters: [a, b] } }).href
// 产生 /a/b// 给定 { path: /:chapters, name: chapters },
router.resolve({ name: chapters, params: { chapters: [] } }).href
// 抛出错误因为 chapters 为空 这些也可以通过在右括号后添加它们与自定义正则结合使用
const routes [// 仅匹配数字// 匹配 /1, /1/2, 等{ path: /:chapters(\\d) },// 匹配 /, /1, /1/2, 等{ path: /:chapters(\\d)* },
]Sensitive 与 strict 路由配置
默认情况下所有路由是不区分大小写的并且能匹配带有或不带有尾部斜线的路由。例如路由 /users 将匹配 /users、/users/、甚至 /Users/。这种行为可以通过 strict 和 sensitive 选项来修改它们可以既可以应用在整个全局路由上又可以应用于当前路由上
const router createRouter({history: createWebHistory(),routes: [// 将匹配 /users/posva 而非// - /users/posva/ 当 strict: true// - /Users/posva 当 sensitive: true{ path: /users/:id, sensitive: true },// 将匹配 /users, /Users, 以及 /users/42 而非 /users/ 或 /users/42/{ path: /users/:id? },],strict: true, // applies to all routes
})可选参数
你也可以通过使用 ? 修饰符(0 个或 1 个)将一个参数标记为可选
const routes [// 匹配 /users 和 /users/posva{ path: /users/:userId? },// 匹配 /users 和 /users/42{ path: /users/:userId(\\d)? },
]请注意* 在技术上也标志着一个参数是可选的但 ? 参数不能重复。
调试
如果你需要探究你的路由是如何转化为正则的以了解为什么一个路由没有被匹配或者报告一个 bug你可以使用路径排名工具。它支持通过 URL 分享你的路由。
编程式导航 除了使用 router-link 创建 a 标签来定义导航链接我们还可以借助 router 的实例方法通过编写代码来实现。
导航到不同的位置
注意在 Vue 实例中你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。
想要导航到不同的 URL可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录所以当用户点击浏览器后退按钮时会回到之前的 URL。
当你点击 router-link 时内部会调用这个方法所以点击 router-link :to... 相当于调用 router.push(...)
声明式编程式router-link :to...router.push(...)
该方法的参数可以是一个字符串路径或者一个描述地址的对象。例如
// 字符串路径
router.push(/users/eduardo)// 带有路径的对象
router.push({ path: /users/eduardo })// 命名的路由并加上参数让路由建立 url
router.push({ name: user, params: { username: eduardo } })// 带查询参数结果是 /register?planprivate
router.push({ path: /register, query: { plan: private } })// 带 hash结果是 /about#team
router.push({ path: /about, hash: #team })注意如果提供了 pathparams 会被忽略上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法你需要提供路由的 name 或手写完整的带有参数的 path
const username eduardo
// 我们可以手动建立 url但我们必须自己处理编码
router.push(/user/${username}) // - /user/eduardo
// 同样
router.push({ path: /user/${username} }) // - /user/eduardo
// 如果可能的话使用 name 和 params 从自动 URL 编码中获益
router.push({ name: user, params: { username } }) // - /user/eduardo
// params 不能与 path 一起使用
router.push({ path: /user, params: { username } }) // - /user当指定 params 时可提供 string 或 number 参数或者对于可重复的参数可提供一个数组。任何其他类型如 undefined、false 等都将被自动字符串化。对于可选参数你可以提供一个空字符串来跳过它。
由于属性 to 与 router.push 接受的对象种类相同所以两者的规则完全相同。
router.push 和所有其他导航方法都会返回一个 Promise让我们可以等到导航完成后才知道是成功还是失败。我们将在 Navigation Handling 中详细介绍。
替换当前位置
它的作用类似于 router.push唯一不同的是它在导航时不会向 history 添加新记录正如它的名字所暗示的那样——它取代了当前的条目。
声明式编程式router-link :to... replacerouter.replace(...)
也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true
router.push({ path: /home, replace: true })
// 相当于
router.replace({ path: /home })横跨历史 该方法采用一个整数作为参数表示在历史堆栈中前进或后退多少步类似于 window.history.go(n)。
例子
// 向前移动一条记录与 router.forward() 相同
router.go(1)// 返回一条记录与 router.back() 相同
router.go(-1)// 前进 3 条记录
router.go(3)// 如果没有那么多记录静默失败
router.go(-100)
router.go(100)篡改历史
你可能已经注意到router.push、router.replace 和 router.go 是 window.history.pushState、window.history.replaceState 和 window.history.go 的翻版它们确实模仿了 window.history 的 API。
因此如果你已经熟悉 Browser History APIs在使用 Vue Router 时操作历史记录就会觉得很熟悉。
值得一提的是无论在创建路由器实例时传递什么样的 history 配置Vue Router 的导航方法( push、replace、go )都能始终正常工作。
导航守卫 正如其名vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中全局的单个路由独享的或者组件级的。
全局前置守卫
你可以使用 router.beforeEach 注册一个全局前置守卫
const router createRouter({ ... })router.beforeEach((to, from) {// ...// 返回 false 以取消导航return false
})当一个导航触发时全局前置守卫按照创建顺序调用。守卫是异步解析执行此时导航在所有守卫 resolve 完之前一直处于等待中。
每个守卫方法接收两个参数
to: 即将要进入的目标 用一种标准化的方式from: 当前导航正要离开的路由 用一种标准化的方式
可以返回的值如下:
false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)那么 URL 地址会重置到 from 路由对应的地址。一个路由地址: 通过一个路由地址跳转到一个不同的地址就像你调用 router.push() 一样你可以设置诸如 replace: true 或 name: home 之类的配置。当前的导航被中断然后进行一个新的导航就和 from 一样。 router.beforeEach(async (to, from) {if (// 检查用户是否已登录!isAuthenticated // ❗️ 避免无限重定向to.name ! Login) {// 将用户重定向到登录页面return { name: Login }}})如果遇到了意料之外的情况可能会抛出一个 Error。这会取消导航并且调用 router.onError() 注册过的回调。
如果什么都没有undefined 或返回 true则导航是有效的并调用下一个导航守卫
以上所有都同 async 函数 和 Promise 工作方式一样
router.beforeEach(async (to, from) {// canUserAccess() 返回 true 或 falseconst canAccess await canUserAccess(to)if (!canAccess) return /login
})可选的第三个参数 next
在之前的 Vue Router 版本中也是可以使用 第三个参数 next 的。这是一个常见的错误来源可以通过 RFC 来消除错误。然而它仍然是被支持的这意味着你可以向任何导航守卫传递第三个参数。在这种情况下确保 next 在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次但是只能在所有的逻辑路径都不重叠的情况下否则钩子永远都不会被解析或报错。这里有一个在用户未能验证身份时重定向到/login的错误用例
// BAD
router.beforeEach((to, from, next) {if (to.name ! Login !isAuthenticated) next({ name: Login })// 如果用户未能验证身份则 next 会被调用两次next()
})下面是正确的版本:
// GOOD
router.beforeEach((to, from, next) {if (to.name ! Login !isAuthenticated) next({ name: Login })else next()
})全局解析守卫
你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似因为它在每次导航时都会触发不同的是解析守卫刚好会在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用。这里有一个例子确保用户可以访问自定义 meta 属性 requiresCamera 的路由
router.beforeResolve(async to {if (to.meta.requiresCamera) {try {await askForCameraPermission()} catch (error) {if (error instanceof NotAllowedError) {// ... 处理错误然后取消导航return false} else {// 意料之外的错误取消导航并把错误传给全局处理器throw error}}}
})router.beforeResolve 是获取数据或执行任何其他操作如果用户无法进入页面时你希望避免执行的操作的理想位置。 全局后置钩子
你也可以注册全局后置钩子然而和守卫不同的是这些钩子不会接受 next 函数也不会改变导航本身
router.afterEach((to, from) {sendToAnalytics(to.fullPath)
})它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。
它们也反映了 navigation failures 作为第三个参数
router.afterEach((to, from, failure) {if (!failure) sendToAnalytics(to.fullPath)
})了解更多关于 navigation failures 的信息在它的指南中。
路由独享的守卫
你可以直接在路由配置上定义 beforeEnter 守卫
const routes [{path: /users/:id,component: UserDetails,beforeEnter: (to, from) {// reject the navigationreturn false},},
]beforeEnter 守卫 只在进入路由时触发不会在 params、query 或 hash 改变时触发。例如从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects。它们只有在 从一个不同的 路由导航时才会被触发。
你也可以将一个函数数组传递给 beforeEnter这在为不同的路由重用守卫时很有用
function removeQueryParams(to) {if (Object.keys(to.query).length)return { path: to.path, query: {}, hash: to.hash }
}function removeHash(to) {if (to.hash) return { path: to.path, query: to.query, hash: }
}const routes [{path: /users/:id,component: UserDetails,beforeEnter: [removeQueryParams, removeHash],},{path: /about,component: UserDetails,beforeEnter: [removeQueryParams],},
]请注意你也可以通过使用路径 meta 字段和全局导航守卫来实现类似的行为。
组件内的守卫
最后你可以在路由组件内直接定义路由导航守卫(传递给路由配置的)
可用的配置 API
你可以为路由组件添加以下配置
beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave
const UserDetails {template: ...,beforeRouteEnter(to, from) {// 在渲染该组件的对应路由被验证前调用// 不能获取组件实例 this // 因为当守卫执行时组件实例还没被创建},beforeRouteUpdate(to, from) {// 在当前路由改变但是该组件被复用时调用// 举例来说对于一个带有动态参数的路径 /users/:id在 /users/1 和 /users/2 之间跳转的时候// 由于会渲染同样的 UserDetails 组件因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 因为在这种情况发生的时候组件已经挂载好了导航守卫可以访问组件实例 this},beforeRouteLeave(to, from) {// 在导航离开渲染该组件的对应路由时调用// 与 beforeRouteUpdate 一样它可以访问组件实例 this},
}beforeRouteEnter 守卫 不能 访问 this因为守卫在导航确认前被调用因此即将登场的新组件还没被创建。
不过你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调并且把组件实例作为回调方法的参数
beforeRouteEnter (to, from, next) {next(vm {// 通过 vm 访问组件实例})
}注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说this 已经可用了所以不支持 传递回调因为没有必要了
beforeRouteUpdate (to, from) {// just use thisthis.name to.params.name
}这个 离开守卫 通常用来预防用户在还未保存修改前突然离开。该导航可以通过返回 false 来取消。
beforeRouteLeave (to, from) {const answer window.confirm(Do you really want to leave? you have unsaved changes!)if (!answer) return false
}使用组合 API
如果你正在使用组合 API 和 setup 函数来编写组件你可以通过 onBeforeRouteUpdate 和 onBeforeRouteLeave 分别添加 update 和 leave 守卫。 请参考组合 API 部分以获得更多细节。
完整的导航解析流程
导航被触发。在失活的组件里调用 beforeRouteLeave 守卫。调用全局的 beforeEach 守卫。在重用的组件里调用 beforeRouteUpdate 守卫(2.2)。在路由配置里调用 beforeEnter。解析异步路由组件。在被激活的组件里调用 beforeRouteEnter。调用全局的 beforeResolve 守卫(2.5)。导航被确认。调用全局的 afterEach 钩子。触发 DOM 更新。调用 beforeRouteEnter 守卫中传给 next 的回调函数创建好的组件实例会作为回调函数的参数传入。
