Vue_导航菜单

一、声明式导航
利用标签来实现路由跳转
1、<router-link>
to：设置目标路由链接。点击后，跳转到目标路由
replace:跳转到目标路由且不留不留history记录
append：追加到当前路由后（只有相对路径有效）

//当前路由： /a ,点击变成： /b
<router-link to="/b">
 //当前路由： /a ,点击变成： /a/b
 <router-link to="/b" append>

tag:让渲染成某种标签（默认：a）
acrive-class:匹配路由时使用的类名
exact-active-class:精确匹配路由时使用类名
event:触发路由的事件（默认：click）
2、<router-view>
name命名试图（默认：default）

二、编辑式导航

利用Router实例（this.$router）的方法实现路由跳转

1、$router.push(location)

this.$router.push('/home');//等同于：<router-link to="/home"></router-link>
//对象
this.$router.push({path:'/home'})
this.$router.push({name:'Home'})

2、$router.replace(location)

类似与router.push(),唯一不同的是它不会向history添加新纪录

3、$router.go(n)/$router.back()/$router.forward()

在history记录中向前或者后退多少步，类似window.history.go(n)

三、案例
1、新建五个文件夹，分别为：Home.vue、List.vue、Goods.vue、Cart.vue、AMain.vue

2、Home.vue

<template>
     <div>首页</div>
</template>
<script>
export default{    
}
</script>

3、List.vue

<template>
    <div>列表</div>
</template>
<script>
export default{
}
</script>

4、Goods.vue

<template>
     <div>商品详情</div>
</template>
<script>
export default{    
}
</script>

5、Cart.vue

<template>
    <div>购物车</div>
</template>
<script>
export default{    
}
</script>

6、AMain.vue

//备注：<el-menu></el-menu>是element-ui样式，使用需要引入element-ui样式
<template>
    <div class="home">
         <!--是Element里面自定义的el-menu组件-->
         <!--:default-active="activeIndex":默认显示哪一个 ；@select选择-->
         <el-menu :default-active="activeIndex+''" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <!--:index索引值; :key唯一的值-->
            <el-menu-item :index="idx+''" v-for="(nav,idx) in navs" :key="nav.name">
                <!--router-link：路由跳转  ；
                :to跳转到目标路由  ; 
                tag="span"去除a标签
                replace:跳转到目标路由且不留下history记录
                active-class="active" 高亮-->
                <router-link :to="nav.path" active-class="active" replace tag="span">{{nav.text}}</router-link>
            </el-menu-item>
        </el-menu>
         <!--router-view全局组件-->
         <router-view></router-view>
    </div>                                                                                                                           
</template>
<script>
/*
   $router:路由实例，具有跳转等方法
   $route: 当前路由信息，保存当前路由的参数
*/
//引入element-ui样式
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//ElementUI以插件的形式来扩展Vue的功能
Vue.use(ElementUI)

export default{
    data(){
        return{
            navs:[
                {
                    text:'首页',
                    name:'Home',
                },       
                {
                    text:'列表',
                    name:'List',
                },
                {
                    text:'详情',
                    name:'Goods',
                },
                {
                    text:'购物车',
                    name:'Cart',
                }
            ],
            activeIndex:0
        }
    },
    methods:{
        //select：菜单激活回调；index：选中菜单项的index;path数组
        handleSelect(index,path){
            console.log(index,path);
            this.activeIndex=index
        }
    },
    //跳转到路由
    created(){
        this.navs.forEach(item=>{
            item.path='/'+item.name.toLowerCase()
        });
        //高亮
        for(let i=0;i<this.navs.length;i++){
            if(this.navs[i].name===this.$route.name){
                this.activeIndex =i;
                break;
            }
        }
    }
}                                                                                                                             
</script>
<style scoped>
.active{color:#f00}
</style>

7、router->index.js

import Vue from 'vue'
import Router from 'vue-router'
import AMain from '@/pages/AMain'
Vue.use(Router)

import Home from '../pages/Home';
import List from '../pages/List';
import Goods from '../pages/Goods';
import Cart from '../pages/Cart';
export default new Router({
  //routes：路由配置，包含所有的页面配置
  routes: [
    {
      //path：访问这个页面的路径
      path: '/',
      //name:设置路由名称，方便执行路由跳转
      name: 'AMain',
      //component指定路由组件（显示到<router-view/>中的组件）
      component: AMain,
          redirect:'/home',
          children:[
            {
              path:'home',
              name:'home',
              component:Home
            },
            {
              path:'list',
              name:'list',
              component:List
            },
            {
              path:'goods',
              name:'goods',
              component:Goods
            },
            {
              path:'cart',
              name:'cart',
              component:Cart
            }
        ]
    }
  ]
})

执行结果如下：