举例说明Vue Router路由重定向与别名设置

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

举例说明Vue Router路由重定向与别名设置

重定向

举例说明:重定向是指当用户访问 /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', ''] },    ],  },]
登录后复制

【相关推荐:vue.js视频教程】

以上就是举例说明Vue Router路由重定向与别名设置的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。

作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:uniapp打包后字体图标不显示怎么办
下一篇:php 替换数组指定的值

发表评论

关闭广告
关闭广告