标签：lis mod index 部分 官网 wrap 标签 使用 aaa
1.首先下载并载入js脚本：
<script type="text/javascript" src="./vue.js" ></script> <script type="text/javascript" src="./vue-router.js" ></script>
2.创建一个实例供vue使用：
<div id="wrap"> <router-link to="/index" > index </router-link> <router-link to="/user" > user </router-link> //设置两个路由 /index和/user <transition mode="out-in" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight"> <router-view></router-view>
//路由视窗
</transition> </div>
script：
new Vue({
el:"#wrap",
//div的id名称 实例化
data:{
//数据存放（暂时为空仅验证后面router）
},
router:router,
//添加router
})
3.接下（在vue中）来定义router,从官网上我们可以知道定义router的方法：var router = new VueRouter({ routes:routeName});
var router = new VueRouter({
routes: [
{ path: ‘/index‘, component: list1},
{ path: ‘/user‘, component: list2},
{path:"*",component:list1}
]
})
（注：routes是一个数组 同等于：
var test = [
{path:"/index",component:list1 },
{path:"/user",component:list2 },
{path:"*",component:list1}
]
var router = new VueRouter({
routes: test
})
）
4.定义component渲染模板：list1 和 list2 -----这部分用到了局部组件的知识
<template id="list1"> <div> <h3> index 页面 </h3> <ul> <li>1111111111111</li> <li>222222222222222</li> <li>333333333333</li> <li>44444444444444</li> <li>4444444444444</li> </ul> </div> </template> <template id="list2"> <div> <h3> user 页面 </h3> <ul> <li>aaaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbbbbbbb</li> <li>cccccccccccccccccc</li> <li>ddddddddddddddddd</li> <li>eeeeeee</li> </ul> </div> </template> <!--注意template里面只能写一个div标签-->
script中：
var list1 = {
template:"#list1",
}
var list2 ={
template:"#list2",
}
就可以实现简单的路由功能了
标签：lis mod index 部分 官网 wrap 标签 使用 aaa
原文地址：http://www.cnblogs.com/AzukiAzusa/p/7286291.html
