重定向与别名怎样设置,操作是什么
导读:在这篇文章中我们会学习到关于“重定向与别名怎样设置,操作是什么”的知识,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望对大家学习或工作能有帮助。下面就请大家跟着小编的思路一起来学习一下吧。 重定向举例说明:重定向是指当用...
在这篇文章中我们会学习到关于“重定向与别名怎样设置,操作是什么”的知识,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望对大家学习或工作能有帮助。下面就请大家跟着小编的思路一起来学习一下吧。
重定向
举例说明:重定向是指当用户访问 /home
时,URL 会被 /
替换,然后匹配成 /
。
重定向也是通过 routes
配置来完成,下面例子是从 /home
重定向到 /
:
const routes = [{
path: '/home', redirect: '/' }
]
登录后复制
重定向的目标也可以是一个命名的路由:
const routes = [{
path: '/home', redirect: {
name: 'homepage' }
}
]
登录后复制
也可以是一个方法,动态返回重定向目标:
const routes = [
{
// /search/screens ->
/search?q=screens
path: '/search/:searchText',
redirect: to =>
{
// 方法接收目标路由作为参数
// return 重定向的字符串路径/路径对象
return {
path: '/search', query: {
q: to.params.searchText }
}
}
,
}
,
{
path: '/search',
// ...
}
,]
登录后复制
别名
将 /
别名为 /home
,意味着当用户访问 /home
时,URL 仍然是 /home
,但会被匹配为用户正在访问 /
。
const routes = [{
path: '/', component: Homepage, alias: '/home' }
]
登录后复制
通过别名,可以自由地将 UI 结构映射到一个任意的 URL,而不受配置的嵌套结构的限制。使别名以 / 开头,以使嵌套路径中的路径成为绝对路径。甚至可以将两者结合起来,用一个数组提供多个别名:
const routes = [
{
path: '/users',
component: UsersLayout,
children: [
// 为这 3 个 URL 呈现 UserList
// - /users
// - /users/list
// - /people
{
path: '', component: UserList, alias: ['/people', 'list'] }
,
],
}
,]
登录后复制
/people
是绝对路径的写法,即可以直接通过 /people
来访问。list
是相对路径的写法,即url会拼接父级的路径 → /users/list。
注意:如果路由有参数,请确保在任何绝对别名中包含它们:
const routes = [
{
path: '/users/:id',
component: UsersByIdLayout,
children: [
// 为这 3 个 URL 呈现 UserDetails
// - /users/24
// - /users/24/profile
// - /24
{
path: 'profile', component: UserDetails, alias: ['/:id', ''] }
,
],
}
,]
以上就是关于重定向与别名怎样设置,操作是什么的介绍,本文内容仅供参考,有需要的朋友可以借鉴了解看看,希望对大家学习或工作,想要了解更多欢迎关注网络,小编每天都会为大家更新不同的知识。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 重定向与别名怎样设置,操作是什么
本文地址: https://pptw.com/jishu/652419.html