重定向和别名 - redirect 重定向,alias 定义别名 - vue router(路由)
重定向和别名
重定向
redirect重定向也是通过routes
配置来完成,下面例子是从/home
重定向到/homepage
:
const routes = [{ path: '/home', redirect: '/homepage' }]
重定向的目标也可以是一个命名的路由:
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路由中添加beforeEnter
守卫不会有任何效果。
在写redirect
的时候,可以省略component
配置,因为它从来没有被直接访问过,所以没有组件要渲染。唯一的例外是嵌套路由:如果一个路由记录有children
和redirect
属性,它也应该有component
属性
相对重定向
也可以重定向到相对位置:
const routes = [ { path: '/users/:id/posts', redirect: to => { // 方法接收目标路由作为参数 // 相对位置不以 `/` 开头 或 { path: 'profile'} return 'profile' }, }, ]
别名
重定向是指当用户访问/home
时,URL 会被/
替换,然后匹配成/
。什么是别名呢?将/
别名为/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'] }, ], }, ]
如果你的路由有参数,请确保在任何绝对别名中包含它们:
const routes = [ { path: '/users/:id', component: UsersByIdLayout, children: [ // 为这 3 个 URL 呈现 UserDetails // - /users/24 // - /users/24/profile // - /24 { path: 'profile', component: UserDetails, alias: ['/:id', ''] }, ], }, ]
关于 SEO 的注意事项:使用别名时,一定要定义规范链接.
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!