vue-router vue路由
vue中，有一个类库叫做vue-router，是用来做单页面路由的。做路由一般分为四个步骤：
- 准备一个根组件 vue.extend()；
- 需要做路由的内容准备 template；
- 准备路由 new VueRouter（）；
- 关联路由 map
- 启动路由 start(App,'#box')；//第一个参数是准备的根组件，第二个参数是要捆绑的位置就是自己定义的id中
github上vue-router下载地址： https://github.com/vuejs/vue-router
关于路由跳转的简单代码如下：
vue-router 路由(根据url不同，出现不同效果，用0.1.13版本)
v-link //跳转链接
router-view //展示内容
1.)在外层定义一个id为box的div，用来以后绑定路由。在html中用v-link来绑定路由跳转的路径，例如：v-link="{path:'/home'}"
2.)准备根组件，为以后的绑定做准备。var App=Vue.extend();
3.)为每个路径定义要显示的内容，例：
var Home=Vue.extend({
template:'<h3>我是第一个a的内容页</h3>'
});
4.)准备路由 var router = new VueRouter();
5.)关联路由
router.map({
'home':{
component:Home
}
6.)启动路由 router.start(App,'#box');
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <script type="text/javascript" src="js/vue.js" ></script>
6 <script type="text/javascript" src="js/vue-router.js" ></script>
7 <script type="text/javascript" src="js/vue-resource.js" ></script>
8 <title></title>
9 </head>
10 <body>
11 <div >
12 <ul>
13 <li>
14 <a v-link="{path:'/home'}">我是第一个a</a>
15 </li>
16 <li >
17 <a v-link="{path:'news'}">我是第二个a</a>
18 </li>
19 </ul>
20 <div>
21 <router-view></router-view>
22 </div>
23 </div>
24 </body>
25 <script>
26 //1.准备一个根组件
27 var App=Vue.extend();
28
29 //2.Home News 组件准备
30 var Home=Vue.extend({
31 template:'<h3>我是第一个a的内容页</h3>'
32 });
33
34 var News=Vue.extend({
35 template:'<h3>我是第二个a的内容页</h3>'
36 })
37
38 //3.准备路由
39 var router = new VueRouter();
40
41 //4.关联
42
43 router.map({
44 'home':{
45 component:Home
46 },
47 'news':{
48 component:News
49 }
50 })
51
52 //5.启动路由
53
54 router.start(App,'#box');
55 </script>
56 </html>如果要默认显示为home页，需要在启动路由前加
router.redirect({
'/':'/home'
});
路由嵌套路由
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <script type="text/javascript" src="js/vue.js" ></script>
6 <script type="text/javascript" src="js/vue-router.js" ></script>
7 <script type="text/javascript" src="js/vue-resource.js" ></script>
8 <title>路由嵌套</title>
9 <style>
10 .v-link-active{
11 font-size: 20px;
12 color: red;
13 }
14 </style>
15 </head>
16 <body>
17 <div >
18 <ul >
19 <li >
20 <a v-link="{path:'/home'}">我是第一个a</a>
21 </li>
22 <li >
23 <a v-link="{path:'news'}">我是第二个a</a>
24 </li>
25 </ul>
26 <br />
27 <div>
28 <router-view></router-view>
29 </div>
30 </div>
31 <template >
32 <h3>home</h3>
33 <div>
34 <a v-link="{path:'/home/login'}">登陆</a>
35 <a v-link="{path:'/home/reg'}">注册</a>
36 </div>
37 <router-view></router-view>
38 </template>
39 <template >
40 <h3>news</h3>
41 </template>
42 </body>
43 <script>
44 //1.准备一个根组件
45 var App=Vue.extend();
46 //2.Home News 组件准备
47 var Home=Vue.extend({
48 template:'#home',
49 });
50 var News=Vue.extend({
51 template:'#news'
52 })
53 //3.准备路由
54 var router = new VueRouter();
55 //4.关联
56 router.map({
57 'home':{
58 component:Home,
59 subRoutes:{
60 'login':{
61 component:{
62 template:'<p>你点击了登陆</p>'
63 }
64 },
65 'reg':{
66 component:{
67 template:'<p>你点击了注册</p>'
68 }
69 }
70 }
71 },
72 'news':{
73 component:News
74 }
75 })
76 //6.跳转路由默认显示为home
77 router.redirect({
78 '/':'/home'
79 });
80 //5.启动路由
81 router.start(App,'#box');
82 </script>
83 </html>- 上一篇 »Vue-Router 动态路由匹配
- 下一篇 »vue-router 快速入门