<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由嵌套和参数传递</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/vue.js"></script>
<script src="js/vue-router.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
<style>
.tab{
text-decoration: none;
padding: 5px 30px;
border-radius: 10px;
background: #c8cbcf;
color: #fd7e14;
}
.tab.active{
background: #6f42c1!important;
color: #ffffff!important;
}
.router-link-active{
background: #6f42c1!important;
color: #ffffff!important;
}
</style>
</head>
<body>
<div id="container">
<div>
<router-link class="tab" to="/home">主页</router-link>
<router-link class="tab" to="/user">用户</router-link>
</div>
<div>
<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
<!--显示路由内容-->
<router-view></router-view>
</transition>
</div>
</div>
<template id="user">
<div>
<h3>用户信息</h3>
<ul>
<router-link to="/user/login?name=tom&pwd=123" tag="li">用户登录</router-link>
<router-link to="/user/register/alice/456" tag="li">用户注册</router-link>
</ul>
<!--显示路由内容-->
<router-view></router-view>
</div>
</template>
<script>
//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
Vue.config.devtools=false;
Vue.config.productionTip=false;//阻止vue启动时生成生产消息
// 1、定义组件
let home={
template:`<h3>我是主页</h3>`
};
let user={
template:"#user"
};
let login={
template:`<div>用户登录...获取参数：{{$route.query.pwd}},{{$route.query.name}}</div>`
};
let register={
template:`<div>用户注册...获取参数：{{$route.params.pwd}},{{$route.params.name}}</div>`
};
//2、配置路由
const routes=[
{path:"*",redirect:'/home'},//默认显示
{
path:"/home",
component:home
},
{
path:"/user",
component:user,
children:[
{
path:"login",
component:login
},
{
path:"register/:name/:pwd",
component:register
},
]
},
];
// 3、创建路由实例
const router=new VueRouter({
routes,
// mode:'history',//更改模式
linkActiveClass:"active",//更改活动链接的类名
});
// 4、创建根实例并将路由挂载到Vue
new Vue({
el:"#container",
router,//注入路由
data:{
name:"tom",
user:{
name:"张三",
age:12
}
}
})
</script>
</body>
</html>
