Vue 多层级路由 redirect 重定向

前言

在一些复杂的项目中，我们经常遇到一些这样的场景。比如点击左边菜单栏，显示右边一级路由，一级路由一个类似于table切换的功能，我们默认显示第一个，有可能要默认显示第三个的情况。这个时候就需要用到重定向。 /hippo/tasks 是相当于一级路由，用来切换，默认情况下需要展示第一个子路由

跳转到 /hippo/tasks 的时候直接显示 子路由

    export default new Router({
        { path: '/hippo/tasks', component: hippoTasks, name: '任务完成情况监控',
            children:[
                { path: '/hippo/tasks/jobanalysis', component: hippoTasksJobanalysis, name: '趋势分析'},
                { path: '/hippo/tasks/history', component: hippoTasksHistory, name: '归类分析'},
                { path: '/hippo/tasks/probability', component:  hippoTasksProbability, name: '概率分析'}
            ],
            redirect:'/hippo/tasks/jobanalysis'
        }
    })
复制代码

一级路由类似 tabs切换

如果在不使用重定向的情况下，默认情况下页面是没有内容的，所以要重定向你要显示的页面就可以啦。link-router默认情况下可以用 router-link-active 设置点击之后的Class 样式，

    <template>
      <ul>
          <li v-for="item in TabsList" :key="rtList.name">
              <router-link class="type" :to="item.url">{{item.name}}</router-link>
          </li>
      </ul>
      <router-view></router-view>
    </template>
    <script>
        export default {
          data() {
            return {
              TabsList: [
                {
                  name: "趋势分析",
                  url: "/hippo/tasks/jobanalysis"
                },
                {
                  name: "归类信息",
                  url: "/hippo/tasks/history"
                },
                {
                  name: "概率分析",
                  url: "/hippo/tasks/probability"
                }
              ]
            };
          }
        };
    </script>
复制代码

转载于:https://juejin.im/post/5bab7c9ff265da0ae343fca3