1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8. </head>
    10. <body>
    11.     <div id="app">
    12.         <h1>Hello App!</h1>
    13.         <p>
    14.         <!-- 使用 router-link 组件来导航. -->
    15.         <!-- 通过传入 `to` 属性指定链接. -->
    16.         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    17.         <router-link to="/">首页</router-link>
    18.         <router-link to="/student">会员管理</router-link>
    19.         <router-link to="/teacher">讲师管理</router-link>
    20.         </p>
    21.         <!-- 路由出口 -->
    22.         <!-- 路由匹配到的组件将渲染在这里 -->
    23.         <router-view></router-view>
    24.     </div>
    25.     <script src="vue.min.js"></script> 
    26.     <script src="vue-router.min.js"></script>
    29.     <script>
    30.         // 1. 定义（路由）组件。
    31.         // 可以从其他文件 import 进来
    32.         const Welcome = { template: '<div>欢迎</div>' }
    33.         const Student = { template: '<div>student list</div>' }
    34.         const Teacher = { template: '<div>teacher list</div>' }
    35.         // 2. 定义路由
    36.         // 每个路由应该映射一个组件。
    37.         const routes = [
    38.         { path: '/', redirect: '/welcome' }, //设置默认指向的路径
    39.         { path: '/welcome', component: Welcome },
    40.         { path: '/student', component: Student },
    41.         { path: '/teacher', component: Teacher }
    42.         ]
    43.         // 3. 创建 router 实例，然后传 `routes` 配置
    44.         const router = new VueRouter({
    45.              routes // （缩写）相当于 routes: routes
    46.         })
    47.         // 4. 创建和挂载根实例。
    48.         // 从而让整个应用都有路由功能
    49.         const app = new Vue({
    50.             el: '#app',
    51.             router
    52.         })
    53.         // 现在，应用已经启动了！
    54.     </script>
    55. </body>
    57. </html>