vue v-link
<div id="app"> <nav class="navbar navbar-inverse"> <div class="container"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <!—使用 v-link 指令，path 的值对应跳转的路径，即#!/home --> <a v-link="{ path : '/home'}">Home</a> </li> <li> <a v-link="{ path : '/list'}">List</a> </li> </ul> </div> </div> </nav> <div class="container"> <!—路由切换组件template 插入的位置 --> <router-view></router-view> </div> </div> js 代码： // 创建子组件，相当于路径对应的页面 var Home = Vue.extend({ template : '<h1>This is the home page</h1>' }); // 创建根组件 var App = Vue.extend({}) // 创建路由器实例 var router = new VueRouter() // 通过路由器实例定义路由规则（需要在启动应用前定义好） // 每条路由会映射到一个组件。这个值可以是由Vue.extend 创建的组件构造函数（如Home） // 也可以直接使用组件选项对象（如'/list' 中component 对应的值） router.map({ '/home': { component: Home }, '/list': { component : { template: '<h1>This is the List page</h1>' } } }) // 路由器实例会创建一个Vue 实例，并且挂载到第二个参数元素选择器匹配的DOM 上 router.start(App, '#app')