<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="js/vue-rute.js" ></script> </head> <body> <div class="" id="app"> <div id="" class="list-group"> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/home">home</router-link> <br /> <router-link to="/home1">home1</router-link> </div> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> <!--定义模版--> <template id="child1"> <div> { {data}} </div> </template> <template id="child2"> <div> { {data}} </div> </template> </body> <script type="text/javascript" charset="utf-8"> //这是vue2的路由用法，vue1的map方法不支持 //创建组件一 var Child=Vue.extend({ template:"#child1", data:function(){ return{ data:"child1数据" } } }) //创建组件2 var Child1=Vue.extend({ template:"#child2", data:function(){ return{ data:"child2数据" } } }) //配置路由 var routes=[ { path: '/', component: Child//默认显示home }, { path:"/home", component:Child }, { path:"/home1", component:Child1 }, ] //生成路由实例 var router=new VueRouter({ routes }); //挂载路由 var vm=new Vue({ el:"#app", router }) </script></html>