路由嵌套的步骤：
1.在创建组件中插入要添加的内容
2.在创建组件中创建A、B组件
3.在配置路由中加入children元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.router-link-active{
color: red;
}
</style>
</head>
<body>
<div class="box">
<router-link to='/home'>首页</router-link>
<router-link to='user'>用户页</router-link>
<router-view></router-view>
</div>
<!-- 盛放每个页面对应的内容-->
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
//2.创建组件
var Home = {
template:`
<h1>首页的内容</h1>
`
}
var User = {
template:`
<div>
<h1>用户页的内容</h1>
<ul>
<li><router-link to='/user/a'>登录</router-link></li>
<li><router-link to='/user/b'>注册</router-link></li>
</ul>
<router-view></router-view>
</div>
`
}
var A = {
template:`
<h1>登录的内容</h1>
`
}
var B = {
template:`
<h1>注册的内容</h1>
`
}
//3.配置路由
const routes=[
{path:'/',component:Home},
{path:'/home',component:Home},
{
path:'/user',
component:User,
children:[
{path:'a',component:A},
{path:'b',component:B}
]
}
]
//4.创建一个路由实例
const router= new VueRouter({
routes:routes
})
//5.把路由挂到vue实例shang
new Vue({
el:'.box',
router:router
})
</script>
</body>
</html>
路由的传参的俩种方式
1.查询字符串
/user/regist?name=jack&age=18;
用{{$route.query}}//接收
2.rest风格
/user/regist/jack/18
{{$route.params}}//接收
//例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.router-link-active{
color: red;
}
</style>
</head>
<body>
<div class="box">
<router-link to='/home'>首页</router-link>
<router-link to='user'>用户页</router-link>
<router-view></router-view>
</div>
<!-- 盛放每个页面对应的内容-->
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
//2.创建组件
var Home = {
template:`
<h1>首页的内容</h1>
`
}
var User = {
template:`
<div>
<h1>用户页的内容</h1>
<ul>
<li><router-link to='/user/a?name=lucky&age=5'>登录</router-link></li>
<li><router-link to='/user/b/Tom/18'>注册</router-link></li>
</ul>
<router-view></router-view>
</div>
`
}
var A = {
template:`
<div>
<h1>登录的内容</h1>
<ul>
<li>{{$route.query}}</li>
<li>{{$route.query.name}}</li>
<li>{{$route.query.age}}</li>
</ul>
</div>
`
}
var B = {
template:`
<div>
<h1>登录的内容</h1>
<ul>
<li>{{$route.params}}</li>
<li>{{$route.params.pname}}</li>
<li>{{$route.params.page}}</li>
</ul>
</div>
`
}
//3.配置路由
const routes=[
{path:'/',component:Home},
{path:'/home',component:Home},
{
path:'/user',
component:User,
children:[
{path:'a',component:A},
{path:'b/:pname/:page',component:B}
]
}
]
//4.创建一个路由实例
const router= new VueRouter({
routes:routes
})
//5.把路由挂到vue实例上
new Vue({
el:'.box',
router:router
})
</script>
</body>
</html>
网友评论