首页 > 其他 > 详细

vue(23)给路由添加重定向和别名

时间:2021-05-18 16:03:02      阅读:20      评论:0      收藏:0      [点我收藏+]

都是在router下的index.js文件中进行配置。

1.重定向配置

比如之前写的localhost:8080和localhost:8080/home都是访问的Home组件,一般我们希望访问localhost:8080/home就直接跳转到localhost:8080即可,则可以使用重定向进行配置:

  {
    path: ‘/‘,
    name: ‘主页‘,
    component: ()=>import(‘../views/Home.vue‘),
    children:[{
      path:‘article‘,
      component:()=>import(‘../views/Article.vue‘),
    }]
  },
  {
    path: ‘/home‘,
    name: ‘Home‘,
    redirect:‘/‘,//配置重定向跳转,如果在浏览器输入localhost:8080/home,则直接会跳到localhost:8080
    component: ()=>import(‘../views/Home.vue‘),
    children:[{
      path:‘article‘,
      component:()=>import(‘../views/Article.vue‘),
    }]
  },

redirect还可以直接配置跳转的name而不是path,上面的代码可以改为:

  {
    path: ‘/‘,
    name: ‘主页‘,
    component: ()=>import(‘../views/Home.vue‘),
    children:[{
      path:‘article‘,
      component:()=>import(‘../views/Article.vue‘),
    }]
  },
  {
    path: ‘/home‘,
    name: ‘Home‘,
    redirect:{name:‘主页‘},//配置重定向跳转,如果在浏览器输入localhost:8080/home,则直接会跳到localhost:8080
    component: ()=>import(‘../views/Home.vue‘),
    children:[{
      path:‘article‘,
      component:()=>import(‘../views/Article.vue‘),
    }]
  },
2.别名配置
就是给路由的路径起一个或者多个别名,使用别名路径访问相当于访问原始路由:
  {
    path: ‘/home‘,
    name: ‘Home‘,
    // redirect:{name:‘主页‘},
    alias:[‘/home1‘,‘/home2‘],//为home路径配置别名,配置后访问localhost:8080/home1和localhost:8080/home2都是访问Home路由组件
    component: ()=>import(‘../views/Home.vue‘),
    children:[{
      path:‘article‘,
      component:()=>import(‘../views/Article.vue‘),
    }]
  },
 

vue(23)给路由添加重定向和别名

原文:https://www.cnblogs.com/maycpou/p/14780374.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!