vue中的重定向和别名

重定向：

重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，
重定向也是通过 routes 配置来完成，下面例子是从 "*" 重定向到 /home：（下面例子中列举了四种方法）

export default new Router({
  mode:'history',
  linkActiveClass:'is-active',
  routes: [
    
    {
      path:'*',
    //  重定向,下面的几种方法都可以
    //   redirect:'/home'
    //   redirect:{path:'/home'}
    //   redirect:{name:'Home'}
      redirect:(to)=>{
        //to目标路由对象，就是访问的路径的路由信息
        console.log(to);
        if(to.path==='/123'){
          return '/about';
        }else if(to.path=='/456'){
          return '/document'
        }else{
          return '/home';
        }

      }
    }
  ]
})

在例子中我们可以看到有四种方法都可以实现重定向

1、重定向的目标可以是一个路由地址：

const router = new Router({
  routes: [
    { path: '*', redirect: '/home'}
  ]
})

2、重定向的目标也可以是一个对象，包含路由地址：

const router = new Router({
  routes: [
    { path: '*', 
      redirect: {path:'/home'}
   }
  ]
})

3、重定向的目标也可以是一个命名的路由：

const router = new Router({
  routes: [
    { path: '*', 
      redirect: {name:'Home'}
   }
  ]
})

4、重定向的目标可以是一个方法，动态返回重定向目标：

const router = new Router({
  routes: [
    { path: '*', 
      redirect:(to)=>{
        //to目标路由对象，就是访问的路径的路由信息
        if(to.path==='/123'){
          return '/about';
        }else if(to.path=='/456'){
          return '/document'
        }else{
          return '/home';
        }

      }
   }
  ]
})

别名：

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

const Router = new Router({
   routes:[
    {
      path: '/home',
      name: 'Home',
      component: home,
      alias:'/index'
     }
   ]

})

“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

vue中的重定向和别名

猜你喜欢