關鍵詞：路由
1.0的寫法
<div id="box">
<ul>
<li><a v-link="{path:'/way'}">安裝</a></li>
<li><a v-link="{path:'/dir'}">目錄</a></li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
var App = Vue.extend();
var Ways = Vue.extend({
template:"<h3>node安裝方法</h3>"
});
var Dirs = Vue.extend({
template:"<h3>node安裝目錄</h3>"
});
// 準備路由
var router = new VueRouter();
// 關聯(lián)
router.map({
"way":{
component:Ways
},
"dir":{
component:Dirs
},
});
router.start(App,"#box");
//6. 跳轉(zhuǎn)
router.redirect({
'/':'dir'
});
2.0寫法
* <script src="https://unpkg.com/vue/dist/vue.js"></script>
* <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="box">
<ul>
<router-link to="/way">方法</router-link>
<router-link to="/dir">目錄</router-link>
</ul>
<router-view></router-view>
</div>
// 定義組件
const Ways = { template: '<div>安裝方法</div>' }
const Dirs = { template: '<div>安裝目錄</div>' }
// 準備路由
const routes = [
{ path: '/way', component: Ways },
{ path: '/dir', component: Dirs }
]
// 創(chuàng)建實例
const router = new VueRouter({
routes // （縮寫）相當于 routes: routes
});
// 掛載實例
new Vue({
el:'#box',
router
});
