Vue路由中的子路由学习
2018-06-26 本文已影响0人
一只码农的成长
1、创建一个首页组件，并通过路由在根实例中显示：
<body>
<div id="app">
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<h2>我是首页模版</h2>
</div>
</script>
<script>
//首页组件
var home = {
template:'#home'
};
var router = new VueRouter({
routes:[
{
path:'/',
component:home
}
]
});
new Vue({
el:'#app',
router
})
</script>
</body>
2、创建另外两个子组件
<script type="text/x-template" id="son1">
<div>
<h2>我是子组件1模版</h2>
</div>
</script>
<script type="text/x-template" id="son2">
<div>
<h2>我是子组件2模版</h2>
</div>
</script>
//子组件1
var son1 = {
template:'#son1'
};
//子组件2
var son2 = {
template:'#son2'
};
3、给首页组件添加这两个子组件，首先要在首页组件中添加router-link，使其能指向子组件，然后在路由规则中首页的路由规则中添加children属性，并配置两个子组件的路由规则，最后要在首页组件模版中添加router-view来展示两个子组件的内容
注
子组件的内容要在父组件中的router-view中展示
<script type="text/x-template" id="home">
<div>
<h2>我是首页模版</h2>
<router-link to="/son1">子组件1</router-link>
<router-link to="/son2">子组件2</router-link>
<router-view></router-view>
</div>
</script>
var router = new VueRouter({
routes:[
{
path:'/',
component:home,
children:[
{
path:'/son1',
component:son1
},
{
path:'/son2',
component:son2
}
]
}
]
});
路由当中的回退
可以在组件当中添加a标签：
//.prevent修饰可以阻止a标签本身的跳转刷新
<a href="" @click.prevent="goBack">回退</a>
然后在对应的组件中添加方法：
methods:{
goBack(){
this.$router.back(-1)
}
}
默认路由
当所有的路由规则都不匹配时，可以添加一个默认路由(配置404页面)：
//定义一个页面找不到的组件
var notFound = {
template:'<h2>该页面找不到了。。。</h2>'
};
{
path:'*',
component:notFound
}
