[vue-router4进阶] 2.重定向和别名

重定向

重定向通过redirect属性来定义,页面会跳到redirect指定的路由
比如,我们定义一个根路由‘/’,让它重定向到‘/index’:

  {
    path: '/',
    redirect: '/index',
  },

就是这样,很简单,在浏览器输入http://localhost:8081/
路由会自动重定向到http://localhost:8081/index, 并且显示首页的内容

redirect还可以是一个方法,这样重定向会更加灵活,在某些时候很有用:

  {
    path: '/list',
    redirect: to=>{ // redirect是一个方法,返回要重定向的目标
      // 这里可以进行一些判断,决定重定向到哪个页面
      return {path:'/index'} // 比如重定向到首页
    },
  },

别名

我们可以给‘/index’页面定义一个别名‘/home’:

  {
    path: '/index',
    alias: '/home', // 新增
    component: () => import('./views/index'),
    name: 'index',
    meta: {
      title: '首页',
      keepAlive: true,
      transition: 'slide-left',
    },
  },

这样,在访问http://localhost:8081/home,显示的也是index页面,和重定向的区别就是,这是页面的路由是不变的,还是/home
别名还有别的更高级的用法,我觉着没什么用,就不介绍了,有兴趣的小伙伴去官网看吧。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容