标签：red user 实例 nload script htm use 复杂 var
我们在前面的学习过程中不管是在学习angular还是vue1，都会遇到二级路由，我们现在先来看一下vue2中的一级路由。
首先要引入的是vue2与路由文件。
js代码：
<script>
window.onload=function () {
var Home={
template:"<h3>我是首页</h3>"
};
var News={
template:"<h3>我是新闻页面</h3>"
};
//配置路由：
var aaa=[
{path:"/home",component:Home},
{path:"/news",component:News},
{path:"*",redirect:"/home"}
];
//生成路由实例：
var router=new VueRouter({
routes:aaa
});
//挂载到某个元素上：
new Vue({
router,//简写
el:"#div"
})
}
</script>
html代码：
<div id="div">
<div>
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
看到这里你们会不会感到不管是vue1还是vue2的路由都要比angular复杂一点，但是要比angular路由容易理解。
下面我们来看一下vue2中的二级路由：
js代码：
<script>
window.onload=function () {
var Home={
template:"<h3>我是首页</h3>"
};
var News={
template:`
<div>
<h3>我是用户信息</h3>
<ul>
<li><router-link to="/user/blue/age/13">blue</router-link></li>
<li><router-link to="/user/red/age/14">red</router-link></li>
<li><router-link to="/user/green/age/15">green</router-link></li>
<li><router-link to="/user/yellow/age/16">yellow</router-link></li>
</ul>
<div><router-view></router-view></div>
</div>
`
};
var UserDefault={
template:`<h4>{{$route.params}}</h4>`
};
//配置路由：
var aaa=[
{path:"/home",component:Home},
{
path:"/news",
component:News,
children:[
{path:"/user/:username/age/:age",component:UserDefault}
]
},
{path:"*",redirect:"/home"}
];
//生成路由实例：
var router=new VueRouter({
routes:aaa
});
//挂载到某个元素上：
new Vue({
router,//简写
el:"#div"
})
}
</script>
html代码：
<div id="div">
<div>
<router-link to="/home">首页</router-link>
<router-link to="/news">用户</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
以上就是vue2中的2级路由！
标签：red user 实例 nload script htm use 复杂 var
原文地址：http://www.cnblogs.com/DongZixin/p/7207635.html
