VUE导航切换 vue-router
- 实现导航点选,不同路由界面展示
- 选中导航高亮提示
- hover提示
第一步:路由设置
位置:router > index.js
import Vue from 'vue'
import Router from 'vue-router'
const home= r => require.ensure([], () => r(require('../components/home')), 'home')
const study = r => require.ensure([], () => r(require('../components/study')), 'study')
const shop = r => require.ensure([], () => r(require('../components/shop')), 'shop')
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'home',
component: home
},
{
path: '/study',
name: 'study',
component: study
},
{
path: '/shop',
name: 'shop',
component: shop
}
})
第二步:main.js 引入路由
位置:main.js
import Vue from 'vue'
import App from './App'
import router from './router' //引用
/* eslint-disable no-new */
new Vue({
el: '#app',
router, //传入
render: h => h(App)
})
第三步:内容页使用
1. 主页面
位置:主内容页.vue
<template>
<div>
<nav-choose></nav-choose>
</div>
</template>
<script>
import NavChoosefrom '../navChoose'
export default {
name: 'showbody',
components: {
NavChoose
},
data() {
return {}
}
}
</script>
<style scoped>
</style>
2.navChoose 导航部分
页面:navChoose.vue
<template>
<div class="fr header-center-right">
<router-link tag="div" class="tab-item tab1" to="/home">
<span class="tab-link">首页</span>
</router-link>
<router-link tag="div" class="tab-item" to="/study">
<span class="tab-link">学习</span>
</router-link>
<router-link tag="div" class="tab-item" to="/shop">
<span class="tab-link">商城</span>
</router-link>
</div>
</template>
<script>
export default {
name: "navChoose",
data() {
return{}
}
};
</script>
<style lang="stylus" scoped>
.header-center-right .tab-item
float: left
font-size: 24px
margin: 0 50px
cursor: pointer
.header-center-right
margin: 0 40px 0 0
//当前页面对应导航 点选状态
&.router-link-active
.tab-link
display: block
background: url('../../images/showline.png') center 77px no-repeat
color: #F04a4a
//hover提示
.tab-item:hover
background: url('../../images/showline.png') center bottom no-repeat
color: #F04a4a
</style>