vue移动端的router设计思路

目的：为了更好的使用keep-alive缓存页面，做到路由区分模块

router/index.js

// 首页
import Home from "@/pages/home/home";
// 其他路由
import EnterpriseView from "@/pages/enterprise/index";
import EnterpriseRouting from "@/pages/enterprise/enterprise.rooting";

export default new Router({
  routes: [
    {
      path: "/home",
      name: "Home",
      component: Home,
      // 路由传参
      meta: {
        header: true, // 是否显示标题
        title: "home页标题", // 标题
      },
    },
    // 实现路由分类
    {
      path: "/enterprise",
      name: "EnterpriseView",
      component: EnterpriseView,
      children: EnterpriseRouting,
    },
    // ...
    // 单个路由缓存
    // {
    //   path: "/view",
    //   name: "View",
    //   component: View,
    //   meta: {
    //     keepAlive: true,
    //   },
    // },
    // 无匹配路由重定向home页
    {
      path: "*",
      redirect: "/home",
    },
  ],
});

App.vue

<template>
  <div id="app">
    <keep-alive :include="keepRouter">
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      keepRouter: [],
    }
  },
  watch: {
    $route(to, from) {},
  },
}
</script>

/pages/enterprise/index.vue

<template>
  <keep-alive :include="keepRouter">
    <router-view></router-view>
  </keep-alive>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      // 页面name的属性值
      keepRouter: ['enterpriseManage'],
    }
  },
  watch: {
    $route(to, from) {
      const newPath = to.path
      const oldPath = from.path
      // 何时清掉缓存页面
      if (newPath == '/enterprise/manage' && oldPath == '/home') {
        return (this.keepRouter = [])
      }
    },
  },
}
</script>

/pages/enterprise/enterprise.rooting.js

const EnterpriseManage = () => import('@/pages/enterprise/enterprise-manage.vue')

export default [
  {
    path: 'manage',
    name: 'EnterpriseManage',
    component: EnterpriseManage,
    meta: {
      header: true,
      title: '页面标题',
    },
  },
]