vue中的重定向和别名

﹏ヽ暗。殇╰゛Y 2022-05-18 23:22 239阅读 0赞

重定向：

重定向”的意思是，当用户访问 /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，而不是受限于配置的嵌套路由结构。