保姆式教你vue路由配置

我的项目环境是：vue2+vue-router3

1、定义路由

import Vue from "vue";
import VueRouter from "vue-router";
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
import Home from "../views/Home.vue";

Vue.use(VueRouter);

// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    // 路由懒加载
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

2. 挂载根实例，记得要通过 router 配置参数注入路由。

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

// 4. 挂载根实例
new Vue({
  router, // 注入路由
  store,
  render: (h) => h(App),
}).$mount("#app");

3、路由出口

当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

路由出口，这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

4、嵌套路由

同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。例如，在 Home 组件的模板添加一个 <router-view>：

<template>
  <div class="home">
    <h2>Home</h2>
    <router-view></router-view>
  </div>
</template>

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    children: [{ path: "profile", component: UserProfile }],
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

此时页面访问 / 会显示 Home 组件，当访问 /profile 的时候，会显示 Home 组件并且该组件里面的 UserProfile 也会显示。

/                                     /profile
+------------------+                  +-----------------+
| Home             |                  | Home            |
|                  |                  | +-------------+ |
|                  |  +------------>  | | UserProfile | |
|                  |                  | |             | |
|                  |                  | +-------------+ |
+------------------+                  +-----------------+

项目实战

比如我们要实现一个 Ant Design Pro 这样的管理系统，我们应该如何配置路由呢？

现在大脑里面思考一下，登录页面是全屏的，其他页面是顶部导航和左部侧边栏常驻，里面的内容实现自由切换。

1、路由配置

我们可以把 /login 配置成一级路由。如何需要做权限控制功能，通常只需要配置登录和404页面，然后再通过调接口获取其他数据。

const router = new Router({
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '*',
      component: Found
    }
  ]
})

然后把 / 也设置为一级路由，通过 Layout 组件实现顶部导航和左部侧边栏常驻的效果，然后把里面的内容配置成二级路由来实现内容切换。

export const authRoutes = [
  {
    path: '/',
    name: 'Layout',
    component: Layout,
    children: [
      {
        path: 'home',
        name: 'Home',
        component: Home
      },
      {
        path: 'about',
        name: 'About',
        component: About
      }
    ]
  }
]

2、路由出口

通过在根 App 组件 router-view 定义一级路由出口

<div id="app">
  <router-view></router-view>
</div>

通过在布局 Layout 组件 router-view 定义二级路由出口

<div class="layout">
  <div>顶部导航</div>
  <div>左部侧边栏</div>
  <router-view></router-view>
</div>

常见的错误配置是把所有页面都配置成一级路由，这样会导致页面布局混乱，我们需要把布局组件和其他全屏组件分开配置，这样才能达到内容完全不一样的展示效果。