路由配置

项目 src/router 目录中的 index.js，是项目的路由配置文件。项目中所有页面的路由配置，都在该文件中完成。

一、配置页面路由

在 router/index.js 中配置首页和登录两个页面的路由：

// 引入首页和登录组件
import HomeView from '../views/home/HomeView.vue'
import LoginView from '../views/login/LoginView.vue'
// ...
const routes = [
    // 配置首页路由
    {
        path: '/home',
        name: 'Home',
        component: HomeView
    }, 
    // 配置登录页路由
    {
        path: '/login',
        name: 'Login',
        component: LoginView
    }, 
]

二、路由出口

路由配置成功后，当浏览器访问对应 path 时，路由组件会加载在内存中，如果需要将组件在页面显示出来，还需要在 App.vue 中设置首页和登录页组件的渲染位置：

<template>
    <router-view></router-view>
</template>

三、路由懒加载

路由懒加载，就是路由很懒，只有当路由被访问的时候才会去加载对应的组件。
示例代码如下：

 const RegisterView = () => import('../views/register/RegisterView.vue');
 const routes = [
     {
         path: '/register',
         name: 'Register',
         component: RegisterView
     }
 ]

也可以直接在 component 属性值处引入：

 const routes = [
     {
         path: '/register',
         name: 'Register',
         component: () => import('../views/register/RegisterView.vue')
     }
 ]

四、路由重定向

路由重定向，是指将一个路径直接跳转到另一个路径。
例如在学生管理系统中，并没有配置 / 的路由。当用户默认进来访问 / 时，就匹配不到对应的页面，因此我们希望一旦用户访问 /，就直接跳转到 /login。即“将 / 重定向到 /login。
配置代码如下：

 const routes = [
     {
         path: '/',
         redirect: '/login'  // 重定向
     },
     {
         path: '/login',
         name: 'Login',
         component: Login
     }
 ]

redirect 属性就是用来实现路由重定向的。redirect 的值，必须是一个已经配置了的路由 path，例如我们上例中已经配置了的 /login。

五、404 页面路由

404 页面路由，指的就是当用户访问的路径，和所有配置的路由都匹配不上时，就判定为 404 的路由。
404 页面路由的 path 的值是一个 *。表示当浏览器的地址与路由配置中的任何一个路由都不匹配时，会自动匹配通用路由。

cosnt NotFound = () => import('../views/not-found/NotFound.vue'),  
const routes = [
     { 
         path: '*', 
         component: 
     }
 ]

通常我们会将通用路由配置到所有路由的最后，当用户访问的路径不存在时，就会匹配到通用路由，跳转到错误提示页面。