<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue路由机制--嵌套路由</title>
</head>
<body>
<div id="app">
<!-- 官网: https://router.vuejs.org/zh/ -->
<!-- 包含的功能
支持html5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由 -->
<!-- 使用步骤
1.引入相关的库文件
2.添加路由链接
3.添加路由填充位
4.定义路由组件
5.配套路由规则并创建路由实例
6.把路由挂载到Vue根实例中 -->
<!-- ----------------------------- -->
<!-- 2.添加路由连接 -->
<router-link to="/user">User</router-link>
<router-link to="/reg">Reg</router-link>
<!-- 3.路由占位符 -->
<router-view></router-view>
</div>
</body>
<!-- 1.引入相关文件 -->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<script type="text/javascript">
//4.创建路由组件
const User={
template:'<h1>User组件</h1>'
}
const Reg={
template:`
<div>
<h1>Reg组件</h1>
<hr />
<!-- 子路由连接 -->
<router-link to='/reg/tab1'>tab1</router-link>
<router-link to='/reg/tab2'>tab2</router-link>
<!-- 子路由占位符 -->
<router-view></router-view>
</div>
`
}
//定义两个子组件
const Tab1={
template:'<h3>tab1子组件</h3>'
}
const Tab2={
template:'<h3>tab2子组件</h3>'
}
//5.配置路由规则并创建路由实例
var router=new VueRouter({
//所有的路由规则
routes:[
//每个路由规则都是一个配置对象，其中至少包含path和component两个属性
//path 表示当前路由规则匹配的hash地址
//component:只接收组件对象。表示当前路由规则对应要展示的组件
{path:'/user',component:User},
{path:'/reg',component:Reg,children:[
//children：数组 表示子路由规则
{path:'/reg/tab1',component:Tab1},
{path:'/reg/tab2',component:Tab2}
]},
//路由重定向：默认主页。
//redirect:将某地址重定向到某个页面地址
{path:'/',redirect:'/user'},
]
})
const vm=new Vue({
el:'#app',
router:router,//挂载路由实例对象
})
</script>
</html>
