Fe-interview: [vue] vue-router怎么重定向页面？

[haizhilin2013]

[vue] vue-router怎么重定向页面？

[wenyejie]

路由中配置redirect属性

[zhengao261]

也可以使用路由的别名来完成重定向

[liuxiaoyang1]

方法一：在routes:[{
{ path: '/a', redirect: '/b' }
}]
方法二：别名
routes: [
{ path: '/a', component: A, alias: '/b' }
]

[zlqGitHub]

以一个实例来说，最直观：

export default {
   path: '',
   name: '',
   meta: {  //元信息（非必填）
      icon: '',  //路由图标
      title: '',   //路由名称
      light: '',    //高亮显示那个路由name
      show: true,   //是否显示
   },
   redirect: {   
      name: '',    //重定向，指向哪个路由的name
   },
   component: '',    //当前路由时要显示的组件
   children: [],    //嵌套子路由
}

[lancelote-zpc]

<div id="first">
    <router-link to="/a">老八一号</router-link>

    <router-view></router-view>
</div>
<script>
    let a={
        template:`<h1>奥里给 干了 兄弟们</h1>`
    };
    let b={
        template:`<h2>虽然不是同一个时间，但是是同一个撤所儿</h2>`
    };
    let routeObj=new VueRouter({
        routes:[
            {path:'/a',redirect:'/b'},
            {path:'/b',component:b}
        ]
    });

    let vm=new Vue({
        el:"#first",
        data:{},
        router:routeObj
    })
</script>

redirect中写一个路径就可以

[lancelote-zpc]

忘了说 还有一种是name的

<div id="first">

    <router-link to="/xiangcunlove">乡村爱情</router-link>
    <router-link to="/horsebighandsome">马大帅</router-link>
    <router-view></router-view>
</div>
<script>
    let horse={
        template:`<div>水库浪子--范德彪</div>`
    };
    let horse2={
        template:`<div>我谢广坤这辈子没说过谢字</div>`
    };
    let routerObj=new VueRouter({
        routes:[
            {path:'/xiangcunlove', redirect:{name:'dashuai'}},
            {path:'/horsebighandsome',component:horse},
            {path:'/horsebighandsome2',component:horse2,name:'dashuai'},
        ]
    });

    let vm=new Vue({
        el:'#first',
        router:routerObj
    })
</script>