首先先引入插件
<script src="Vue.js"></script> //vue.js在前面 <script src="vue-route.js"></script>
然后写在页面展示的代码
<div id="div"> <ul> <li><a v-link="{path:'/home'}">首页</a></li> <li><a v-link="{path:'/news'}">新闻</a></li> </ul> <router-view></router-view> </div>
实现路由的js代码
<script> //1.开启路由; var app = Vue.extend(); //2.定义模板: var Home = Vue.extend({ template: '<h3>我是首页的内容</h3>' }); var News = Vue.extend({ template: '<h3>我是新闻的内容</h3>' }); //3.定义路由: var Router = new VueRouter(); Router.map({ '/home': { component: Home }, '/news': { component: News } }); //开始: Router.start(app,'#div'); </script>