1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="../lib/js/vue.js"></script>
7 <!-- 第一步：安装 vue-router -->
8 <script src="../lib/js/vue-router.js"></script>
9 </head>
10 <body>
11 <div >
12 <a href="#/login">登录</a>
13 <a href="#/register">注册</a>
14
15 <!-- router-view 是由 vue-router 提供的，专门用来当作占位符的，将来路由规则匹配到的组件
16 就会展示到这个 router-view 中去-->
17 <router-view></router-view>
18 </div>
19 <script>
20
21 // 第三步：创建组件模板
22 const login = {
23 template:'<h1>login组件</h1>'
24 };
25 const register = {
26 template:'<h1>register组件</h1>'
27 };
28
29 // 第二步：创建一个路由对象，当导入 vue-router 包之后，在 window 全局对象中，就有了一个
30 // 路由的构造函数，叫作 VueRouter
31 // 在 new 路由对象的时候，可以为 构造函数传递一个配置对象
32
33 const routerObj = new VueRouter({
34 // route // 这个配置对象中的 route 表示【路由匹配规则】
35 routes:[ // 路由匹配规则
36 // 每个路由规则都是一个对象，这个对象身上有两个必须的属性
37 // 属性1. path，表示监听哪个路由链接地址
38 // 属性2. component，表示如果路由是前面匹配到的path，则展示 component属性对应的那个组件
39 { path:'/login',component:login },
40 { path:'/register',component:register }
41 ]
42 });
43
44 const vm = new Vue({
45 el:'#app',
46 data:{},
47 methods:{},
48 // 第四步：将路由规则对象注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
49 router:routerObj
50 })
51 </script>
52 </body>
53 </html>
