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 id="box">
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‘
});
时间： 2024-07-31 05:00:51