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 id="app"> 12 <!-- <a href="#/login">登录</a>--> 13 <!-- <a href="#/register">注册</a>--> 14 <!-- router-link 的使用 15 router-link 默认渲染为一个 a 标签，也可以使用 tag='span' 渲染为指定的标签 --> 16 <router-link to="/login">登录</router-link> 17 <router-link to="/register">注册</router-link> 18 19 <!-- router-view 是由 vue-router 提供的，专门用来当作占位符的，将来路由规则匹配到的组件 20 就会展示到这个 router-view 中去--> 21 <router-view></router-view> 22 </div> 23 24 <script> 25 // 创建组件模板对象 26 const login = { 27 template:'<h1>login组件</h1>' 28 }; 29 const register = { 30 template:'<h1>register组件</h1>' 31 }; 32 33 // 创建一个路由对象，当导入 vue-router 包之后，在 window 全局对象中，就有了一个 34 // 路由的构造函数，叫作 VueRouter 35 // 在 new 路由对象的时候，可以为 构造函数传递一个配置对象 36 const routerObj = new VueRouter({ 37 // route // 这个配置对象中的 route 表示【路由匹配规则】 38 39 routes:[ // 路由匹配规则 40 41 // 重定向，这里的 redirect 和 node 中的 redirect 完全是两码事 42 { path:'/',redirect:'/login'}, 43 44 // 每个路由规则都是一个对象，这个对象身上有两个必须的属性 45 // 属性1. path，表示监听哪个路由链接地址 46 // 属性2. component，表示如果路由是前面匹配到的path，则展示 component属性对应的那个组件 47 // 注意：component的属性值，必须是一个组件的模板对象，不能是组件的引用名称 48 { path:'/login',component:login }, 49 { path:'/register',component:register } 50 ] 51 }); 52 53 54 // 创建 vue 实例 55 const vm = new Vue({ 56 el:'#app', 57 data:{}, 58 methods:{}, 59 60 // 将路由规则对象注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件 61 router:routerObj 62 }) 63 </script> 64 </body>