项目实际开发中肯定会出现一个菜单下有几个子菜单的情况,还有一个页面跳转到另外一个页面参数传递的问题,在vue中如何实现呢,通过children来实现路由嵌套,通过$route.query、$route.params实现参数的获取
简单的页面效果(实现了路由嵌套和参数获取问题)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
.active{
font-size:20px;
color:red
}
</style>
</head>
<body>
<div id="rou">
<p>
<router-link to="/home">首页</router-link>
<router-link to="/user">账户管理</router-link>
</p>
<router-view></router-view>
</div>
<template id="user">
<div>
<h3>参数传递</h3>
<ul>
<li><router-link to="/user/q?name=xcc01&pwd=123">普通查询参数</router-link></li>
<li><router-link to="/user/rest/xcc02/456">rest风格参数</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
const home = { template: '<div>welcome 首页</div>' }
const user = { template: '#user' }
const q = { template: '<div>普通查询参数{{$route.query}}</div>' }
const r = { template: '<div>rest风格参数{{$route.params}}</div>' }
const routes = [
{ path: '/home', component: home },
{ path: '/user', component: user,children:[
{
path:'q',
component:q
},
{
path:'rest/:name/:pwd',
component:r
}
]},
{ path: '*', redirect: '/home'},//重定向
]
const router = new VueRouter({
routes: routes,
linkActiveClass:'active' // 修改选中的css 默认为router-link-active
})
var aj = new Vue({
el:'#rou',
router:router
})
</script>
</body>
</html>
需要注意的是$route.query是用来获取普通传参的也就是?号形式的。
$route.params用来获取rest风格的参数,但我们要注意在path中一定要使用/:来命名。