vue2.0路由数据嵌套
<script>
//组件
const Home = {
template:'<h3>我是主页</h3>'
};
const Users = {
template:`
<div>
<h3>我是用户信息</h3>
<ul>
<li><router-link to="/users/Amumu/age/15">阿木木</router-link></li>
<li><router-link to="/users/Ezreal/age/23">伊泽瑞尔</router-link></li>
<li><router-link to="/users/Annie/age/12">安妮</router-link></li>
<li><router-link to="/users/Janna/age/26">迦娜</router-link></li>
<li><router-link to="/users/Katarina/age/27">卡特琳娜</router-link></li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
`
}
const About = {
template:'<h3>我是关于</h3>'
}
const Teemo={
template:'<div>{{$route.params}}</div>'
}
//配置路由
const routes = [
{path:'/home', component :Home},
{
path:'/users',
component:Users,
children:[
{path:':users/age/:age',component:Teemo}
]
},
{path:'/about',component:About},
//重定向
{path:'*',redirect:'/home'}
]
//生成路由实例
const router = new VueRouter({
routes
})
//挂载到vue上
new Vue({
router,
el:'#box'
})
</script>
作者:webarn
出处:http://www.cnblogs.com/webran/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

浙公网安备 33010602011771号