vue 导航切换

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>