【vuejs】vue-router多层级路由配置以及页面嵌套的处理

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'
import Dashboard from '@/components/Dashboard'
import UserProfile from '@/components/UserProfile'
 
Vue.use(Router)
 
const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      children: [
        {
          path: 'login',
          name: 'login',
          component: Login
        },
        {
          path: 'dashboard',
          name: 'dashboard',
          component: Dashboard,
          children: [
            {
              path: 'profile',
              name: 'user-profile',
              component: UserProfile
            }
          ]
        }
      ]
    }
  ]
})
 
export default router

这个代码实例展示了如何在Vue.js中使用vue-router配置多层级的路由，以及如何嵌套子路由。在这个例子中，/dashboard/profile路径将渲染UserProfile组件，而且它是嵌套在Dashboard组件内部的。这种嵌套可以用于构建复杂的应用界面，其中子路由根据父路由的不同而变化。