<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')
vue v-link
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性：var data = { a:...
- SPA单页应用 传统的项目大多使用多页面结构，需要切换内容的时候我们往往会进行单个html文件的跳转，这个时候受网...
