vue多级路由及重定向

Vue的多级路由和重定向是非常常见的应用场景，下面我简单介绍一下如何实现。

首先我们需要在`router/index.js`中定义多级路由，例如：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Page1 from '@/components/Page1'
import Page2 from '@/components/Page2'
import Page3 from '@/components/Page3'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      children: [
        {
          path: 'page2',
          name: 'Page2',
          component: Page2
        },
        {
          path: 'page3',
          name: 'Page3',
          component: Page3
        }
      ]
    }
  ]
})

上述代码定义了一个多级路由，`/page1`是一级路由，`/page1/page2`和`/page1/page3`是二级路由。

接下来我们需要实现重定向功能，例如将`/`重定向到`/home`：

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      children: [
        {
          path: 'page2',
          name: 'Page2',
          component: Page2
        },
        {
          path: 'page3',
          name: 'Page3',
          component: Page3
        }
      ]
    }
  ]
})

上述代码中，我们定义了一个重定向路由，将`/`重定向到`/home`。

以上就是Vue多级路由和重定向的简单实现。