37_Vue_编辑式导航前进和后退的跳转

实现前进和后退，使用熟悉的原生js,即$router.go(n)/$router.back()/$router.forward()
一、AMain.vue页面
1、不使用<router-link></router-link>路由跳转,通过方法传入name实现跳转，即@click="goto(nav.name)"，传入name：

<template>
    <div class="home">
        <el-menu :default-active="activeIndex+''" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item :index="idx+''" v-for="(nav,idx) in navs" :key="nav.name" @click="goto(nav.name)">
                <!-- <router-link :to="nav.path" replace tag="span">{{nav.text}}</router-link> -->
                {{nav.text}}
            </el-menu-item>
        </el-menu>
         <router-view></router-view>
    </div>
</template>
<script>
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
export default{
    data(){
         return{
            navs:[
                {
                    text:'首页',
                    name:'Home',
                },
                {
                    text:'列表',
                    name:'List',
                },
                {
                    text:'详情',
                    name:'Goods',
                },
                {
                    text:'购物车',
                    name:'Cart',
                }
            ],
            activeIndex:0
        }
    },
    methods:{
        handleSelect(index,path){
            console.log(index,path);
            this.activeIndex=index
        },
        //方法如下
        goto(name){
            console.log('App',this)
            //获取路由
            this.$router.push({name})
        }
    },
    created(){
        this.navs.forEach(item=>{
            item.path='/'+item.name.toLowerCase()
        });
    }
}
</script>

二、AMain.vue页面
1、不使用<router-link></router-link>路由跳转,通过方法传入path实现跳转，即@click="goto(nav.path)"，传入path：

<template>
    <div class="home">
        <el-menu :default-active="activeIndex+''" class="el-menu-demo" mode="horizontal" @select="handleSelect">
           <!--传入path,@click="goto(nav)"-->
            <el-menu-item :index="idx+''" v-for="(nav,idx) in navs" :key="nav.name" @click="goto(nav)">
                <!-- <router-link :to="nav.path" active-class="active" replace tag="span">{{nav.text}}</router-link> -->
                {{nav.text}}
            </el-menu-item>
        </el-menu>
         <router-view></router-view>
    </div>
</template>
<script>
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
export default{
    data(){
        return{
            navs:[
                {
                    text:'首页',
                    name:'Home',
                }, 
               { 
                    text:'列表',
                    name:'List',
                },
                { 
                    text:'详情',
                    name:'Goods',
                },
                {
                    text:'购物车',
                    name:'Cart',
                }
            ],
            activeIndex:0
        }
    },
    methods:{
        handleSelect(index,path){
            console.log(index,path);
            this.activeIndex=index
        },
        //传入path
        goto(nav){
            console.log('App',this)
            //获取路由
            //this.$router.push({path:nav.path})
        }
    },
    created(){
        this.navs.forEach(item=>{
            item.path='/'+item.name.toLowerCase()
        });
    }
}