vue官方API:飞机票~~呜
我的做法是先跟着代码敲一遍看到效果，再讲解各个原因
1，引入js文件
1
2
| <script src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.4.0/vue-router.js"></script>
|
2，代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <body>
<div id="app">
<div>
<!--
router-link to属性就是指向某个具体的链接，链接的内容会被渲染到router-view标签中
router-link会被渲染成a标签，例如第一个会变成<a href="#/first">第一个页面</a>,前面加了个#
-->
<router-link to="/first">第1个页面</router-link>
<router-link to="/second">第2个页面</router-link>
<router-link to="/third">第3个页面</router-link>
</div>
<router-view></router-view>
</div>
</body>
<script>
/*
* 申明三个模板
*/
var first = { template: '<p>this is first page</p>' };
var second = { template: '<p>this is second page</p>' };
var third = { template: '<p>this is third page</p>' };
/*
* 定义路由，component属性是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。
*/
var routes = [
{ path: '/first', component: first },
{ path: '/second', component: second },
{ path: '/third', component: third }
];
/*
* 创建VueRouter实例
*/
var router = new VueRouter({
routes:routes
});
/*
* 给vue对象绑定路由
* .$mount("#app")手动挂载，用来延迟挂载，跟
* const app = new Vue({
* el:"#app"
* router
* });
* 效果是一样的
*/
const app = new Vue({
router
}).$mount("#app");
</script>
|
这个时候就基本实现了功能，点击几个按钮上面的地址会发生变化，并且router-view里面会被渲染成对应的内容。并且刷新页面不会跳到首页
运行步骤：
1，当router-link对应的标签被点击时，比如此时点击第二个，to的值是/second,那么实际的地址就是当前页面地址+#/second。
2，Vue会找到当前vue实例的路由里的routes里面path为/second的路由。
3，会将找到的这一行记录的模板component渲染到router-view里面。
redirct重定向
在routes数组里面添加
{ path: ‘/‘, redirect: ‘/first’},
当打开页面时候，会自动重定向到第一个中.
tag
router-link默认会被渲染成a标签
我们可以加上tag=”li”就会被渲染成li标签
active-class
router-link标签被选中时候会默认给选中的元素添加.router-link-active属性，我们可以通过设置active-class设置被选中后添加的class样式
