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

都是在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'),
    }]
  },
 
原文地址:https://www.cnblogs.com/maycpou/p/14780374.html