spa项目路由通用配置

 1. 定义路由

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    component: () => import(/* webpackChunkName: "layout" */ "./layouts/BasicLayout"),
    beforeEnter: (to, from, next) => {
      next();
    },
    children: [
      {
        path: "/",
        redirect: "/home",
      },
      {
        path: "/home",
        name: "Home", // 路由名称
        meta: { icon: "dashboard", title: "主页" }, // 元信息：菜单图标、标题
        component: () => import(/* webpackChunkName: "layout" */ "../components/Home"),
      },
      // 动态路由
      {
        path: "/user/:id",
        name: "User",
        component: () => import(/* webpackChunkName: "layout" */ "../components/User"),
        // 嵌套路由
        children: [
          {
            // 当 /user/:id 匹配成功
            path: "",
            component: () => import(/* webpackChunkName: "user" */ "../components/UserHome")
          },
          {
            // 当 /user/:id/profile 匹配成功
            path: "/user/:id/profile", // 在生成路由时，主路由上的path会被自动添加到子路由之前
            meta: { title: "profile页" },
            component: () => import(/* webpackChunkName: "user" */ "../components/UserProfile")
          },
          {
            // 当 /user/:id/posts 匹配成功
            path: "/user/:id/posts",
            component: () => import(/* webpackChunkName: "user" */ "../components/UserPosts")
          }
        ]
      },
      {
        path: "/item-*",
        name: "Item",
        component: Item
      }
    ]
  },
  {
    path: "/account",
    component: () => import(/* webpackChunkName: "layout" */ "./layouts/AccountLayout"),
    children: [
      {
        path: "/account",
        redirect: "/account/login"
      },
      {
        path: "/account/login",
        name: "Login",
        component: () => import(/* webpackChunkName: "account" */ "./views/Account/Login")
      },
      {
        path: "/account/register",
        name: "Register",
        component: () => import(/* webpackChunkName: "account" */ "./views/Account/Register")
      }
    ]
  },
  // 匹配所有未匹配的路径, 通常用于客户端 404 错误
  {
    path: "*",
    name: "404",
    component: NotFound
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

router.beforeEach((to, from, next) => {
  // ...
  next();
});

export default router;

2. 使用路由

import router from './router';

const app = new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app')

通过注入路由器，我们可以在任何组件内部通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由：

export default {
  computed: {
    id() {
      return this.$route.params.id
    }
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}

3. 定义路由视图

<div id="app">
  <p>
    <router-link to="/">首页</router-link>
    <router-link to="/user/5">User</router-link>
    <router-link to="/item-orange">Orange</router-link>
  </p>
  
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view />
</div>