关键词：路由
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();
// 关联
router.map({
"way":{
component:Ways
},
"dir":{
component:Dirs
},
});
router.start(App,"#box");
//6. 跳转
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 }
]
// 创建实例
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
});
// 挂载实例
new Vue({
el:'#box',
router
});
