vue用路由写出三级区域菜单

在Vue.js中使用路由（vue-router）创建三级区域菜单，可以利用动态嵌套路由来实现。假设你有一个结构类似于`一级菜单 > 二级菜单 > 三级菜单`的导航，你可以按照下面的步骤配置：

首先，在你的项目中安装vue-router：

npm install vue-router

然后，在`main.js`或其他适当的位置，设置路由：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue'; // 一级菜单首页
import AreaOne from '@/components/AreaOne.vue'; // 一级菜单对应的组件
import AreaOneTwo from '@/components/AreaOne/AreaOneTwo.vue'; // 二级菜单页面
import AreaOneTwoThree from '@/components/AreaOne/AreaOneTwo/AreaOneTwoThree.vue'; // 三级菜单页面

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/area-one',
      name: 'AreaOne',
      component: AreaOne,
      children: [
        {
          path: 'area-one-two',
          name: 'AreaOneTwo',
          component: AreaOneTwo,
          children: [
            {
              path: 'area-one-two-three',
              name: 'AreaOneTwoThree',
              component: AreaOneTwoThree,
            }
          ]
        }
      ]
    }
  ]
});

现在，你可以通过`this.$router.push('/area-one/area-one-two/area-one-two-three')`跳转到特定的三级菜单页面。