声明式导航
<template>
<nav>
<ul>
<router-link to="/film" tag="li" active-class="kerwinactive">
<i class="iconfont icon-training"></i>
<span>电影</span>
</router-link>
<router-link to="/cinema" tag="li" active-class="kerwinactive">
<i class="iconfont icon-all"></i>
<span>影院</span>
</router-link>
<router-link to="/center" tag="li" active-class="kerwinactive">
<i class="iconfont icon-account"></i>
<span>我的</span>
</router-link>
</ul>
</nav>
</template>
<style lang="scss" scoped>
nav{
position: fixed;
bottom: 0;
left:0;
width:100%;
height: 50px;
line-height: 25px;
text-align: center;
background: white;
ul{
display: flex;
li{
flex:1;
display: flex;
flex-direction: column;
i{
font-size: 20px;
}
span{
font-size: 12px;
}
}
}
}
.kerwinactive{
color:red;
}
</style>
编程式导航
跳转前页面
<template>
<div>
nowplaying
<ul>
<li v-for="data in datalist" :key="data.id" @click="handleClick(data.id)">
{{data.title}}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
datalist: [{
id: 111,
title: '夺冠'
}, {
id: 222,
title: '姜子牙'
}, {
id: 333,
title: '花木兰'
}]
}
},
methods: {
handleClick (id) {
// console.log(id)
// location.href = '#/center'
// 1- 路径
this.$router.push(`/detail/${id}`) // 编程式导航
// 2-路由名字
// this.$router.push({
// name: 'kerwinDetail',
// params: {
// myid: id
// }
// })
// 3- query方式跳转详情
// this.$router.push(`/detail?id=${id}`)
}
}
}
</script>
目标页面
<template>
<div>
detail
</div>
</template>
<script>
export default {
mounted () {
// this.$route 当前匹配的路由对象信息
console.log('利用获取的id ,ajax请求后端接口', this.$route.params.myid)
// console.log('利用获取的id ,ajax请求后端接口', this.$route.query.id)
}
}
</script>