<style>
a{
color:black;
}
.header{
height: 40px;
line-height: 35px;
padding: 0 5px;
border-bottom: 1px solid black;
}
.header>a{
display: inline-block;
height: 35px;
width: 50px;
line-height: 35px;
text-align: center;
text-decoration:none;
}
.header .active{
border-bottom: 2px solid #42b983;
}
</style>
<script type="text/javascript">
window.onload = function() {
var home = {
template:"<p>我是首页</p>"
}
var user = {
template:"#user",
}
var login = {
template:"<div><p>登录页</p><p>name:{{name}}</p><p>age:{{age}}</p></div>",
data(){
return {
name:"",
age:""
}
},
mounted(){
this.name = this.$route.query.name;
this.age = this.$route.query.age;
}
}
var regist = {
template:"<div><p>注册页</p><p>name:{{name}}</p><p>age:{{age}}</p></div>",
data(){
return {
name:"",
age:""
}
},
mounted(){
this.name = this.$route.params.name;
this.age = this.$route.params.age;
}
}
//路由关系配置
const config = [
{
path: '/',
redirect: '/home',//设置默认指向的路径
name: '主页'
},
{
path:"/home",
component:home,
name:"home"
},
{
path:"/user",
component:user,
name:"用户页",
children:[
{
path:"login",
component:login,
name:"登录"
},
{
path:"regist/:name/:age",
component:regist,
name:"注册"
}
]
},
{
// 匹配所有404路由
path: '*',
redirect:home,
}
]
//创建路由实例
const router = new VueRouter({
routes:config,
linkActiveClass:"active"//修改选中样式
})
// vue实例
var temp = new Vue({
el:"#eme",
router,//注入路由 简写 router:router
methods:{
push(){
//添加路由
router.push({
path:"/user/login",
query:{
name:"zhangsan",
age:18
}
})
},
replace(){
//替换路由
router.replace({
path:"/user/regist/lisi/34",
component:regist,
})
}
}
})
}
</script>
<!-- Vue对象 -->
<div id="eme">
<div class="header">
<!-- 组件导航 -->
<router-link to="/home">首页</router-link>
<router-link to="/user">用户</router-link>
<button @click="push">push增加历史页面</button>
<button @click="replace">replace替换页面</button>
</div>
<div>
<!-- 用来显示路由的内容 -->
<router-view></router-view>
</div>
</div>
<!-- 模版一 -->
<template id="user">
<div>
<p>用户显示界面</p>
<ul>
<!-- get传参方式 -->
<li><router-link to="/user/login?name=zhangsan&age=18">登录</router-link></li>
<!-- rest传参方式 -->
<li><router-link to="/user/regist/lisi/34">注册</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>