vue

vue-router怎么重定向页面?

发布于 2021-01-11 17:02:36
关注者
0
被浏览
466
4 个回答
  • 面试哥
    面试哥 2021-01-12
    为面试而生,有面试问题,就找面试哥。
    <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中写一个路径就可以

  • 面试哥
    面试哥 2021-01-12
    为面试而生,有面试问题,就找面试哥。

    忘了说 还有一种是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>
  • 面试哥
    面试哥 2021-01-12
    为面试而生,有面试问题,就找面试哥。

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

  • 面试哥
    面试哥 2021-01-12
    为面试而生,有面试问题,就找面试哥。

    以一个实例来说,最直观:

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

面圈网VIP题库全新上线,海量真题题库资源。 90大类考试,超10万份考试真题开放下载啦

去下载看看