-
嵌套路由概念
当我们使用 vue Router路由管理器,显示组件 ,并且 显示的组件中还有新的子级路由链接以及内容。
children数组 表示 子路由规则
-
嵌套路由案例
核心代码:
// 创建路由实例
var myRouter = new VueRouter({
// 配置路由规则
routes:[
{
path:'/index',
component:index,
// meta路由原信息
// 把任意信息 挂载在 路由上的meta属性里
meta:{
title:'首页',
icon:'小爱心',
requiresAuth:true
}
},
{
path:'/news',
component:news,
meta:{
title:'新闻中心'
},
// 嵌套路由(子路由)
children:[
// 配置子路由规则
{
path:'/news/one',
component:one,
},
{
path:'/news/two',
component:two,
},
]
}
]
});
完整代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<router-link to="/index">首页</router-link>
<router-link to="/news">新闻中心</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<template id="index">
<div>
<h1>我是首页组件</h1>
<h2 style="color:blueviolet;">{{$route.meta.title}}</h2>
<h2 style="color:aqua;">{{$route.meta.icon}}</h2>
<h2 style="color:yellow;">{{$route.meta.requiresAuth}}</h2>
</div>
</template>
<template id="news">
<div>
<h1>我是新闻中心组件</h1>
<router-link to="/news/one">公司新闻</router-link>
<router-link to="/news/two">行业新闻</router-link>
<router-view></router-view>
</div>
</template>
<template id="one">
<div>
<h1>我是公司新闻组件</h1>
</div>
</template>
<template id="two">
<div>
<h1>我是行业新闻组件</h1>
</div>
</template>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
// 首页组件
var index = {
template:'#index'
}
var news = {
template:'#news'
}
var one = {
template:'#one'
}
var two = {
template:'#two'
}
// 创建路由实例
var myRouter = new VueRouter({
// 配置路由规则
routes:[
{
path:'/index',
component:index,
// meta路由原信息
// 把任意信息 挂载在 路由上的meta属性里
meta:{
title:'首页',
icon:'小爱心',
requiresAuth:true
}
},
{
path:'/news',
component:news,
meta:{
title:'新闻中心'
},
// 嵌套路由(子路由)
children:[
// 配置子路由规则
{
path:'/news/one',
component:one,
},
{
path:'/news/two',
component:two,
},
]
}
]
});
var vm = new Vue({
el:'#app',
// 挂载路由
router:myRouter,
data(){
return{
}
},
methods:{
},
components:{
}
})
</script>
</body>
</html>
预览效果图