1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6 <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
7 <title>管理后台</title>
8 <script src="../lib/jquery2.1.4.min.js"></script>
9 <script src="../lib/Vue2.5.17.js"></script>
10 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
11 <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
12 <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
13 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
14 </head>
15 <style>
16 /* 使用了router-link的组件会有一个router-link-active类 */
17 .router-link-active {
18 color: red;
19 font-weight: bold;
20 font-size: 18px;
21 }
22 </style>
23 <body>
24 <div id="app">
25 <!-- <a href="#/login">登录</a>
26 <a href="#/register">登录</a> -->
27 <!-- 不推荐使用#号这种方式 -->
28
29 <!-- Vue-router提供了一个<router-link to="/lgin"></router-link> -->
30 <router-link to="/login">登录</router-link>
31 <!-- 默认渲染为一个a标签，通过tag可以修改 -->
32 <router-link to="/register" tag="span">注册</router-link>
33 <!-- 这是由vue-router提供的元素，用来当作占位符的，路由规则匹配到的组件就会展示到这个router-view中 -->
34 <!-- 使用router-view 提供一个展示的容器 -->
35 <router-view></router-view>
36 </div>
37 <template id="tmp">
38 <div>
39 <h1>我是模板一的内容，登录</h1>
40 </div>
41 </template>
42 <template id="tmp1">
43 <div>
44 <h1>我是模板二的内容，注册</h1>
45 </div>
46 </template>
47 <script>
48
49 var login = {
50 template : ‘#tmp‘
51 }
52 var register = {
53 template : ‘#tmp1‘
54 }
55
56 var routerObj = new VueRouter({
57 // route //这个配置对象中的router表示路由匹配规则的意思
58 routes : [ //路由匹配规则
59 // 每个路由规则都是一个对象，这个规则对象身上有两个必须的属性
60 // 属性1是path , 表示监听哪个路由链接地址
61 // 属性2是component ， 表示如果路由前面匹配到的path,则展示component属性对应的组件
62 // component的属性值，必须是一个模板对象，不能是一个组件名称。
63 { path : ‘/‘ , redirect : ‘/login‘}, //这是的redirect和node中的redirect不一样。
64 { path : ‘/login‘ , component : login},
65 { path : ‘/register‘ , component : register},
66 ],
67 // 自定义激活的类名称
68 linkActiveClass : ‘myactive‘
69 })
70
71 var vm = new Vue({
72 el : ‘#app‘,
73 data : {},
74 methods: {
75
76 },
77 // 将路由规则对象注册到vm实例上用来监听url地址变化 ，然后展示对应组件。
78 router : routerObj
79 })
80 </script>
81 </body>
82 </html>
原文地址：https://www.cnblogs.com/winter-shadow/p/10216851.html
时间： 2024-07-31 13:20:11