8.①配路由跳转页面（前进和后退）②配置首页

一：前进

1.安装vue-router

2.在router/index.js下配置以下

//1.引入vue-router
import VueRouter from 'vue-router';

//2.定义routes路由的集合，数组类型
const routes = [
  {
    path: '/sharefriend',
    name: 'ShareFriend',
    component: () =>
      import ('@/views/my-visit/ShareFriend.vue')
  },
]

//3.实例化VueRouter并将routes添加进去
const router = new VueRouter({
  routes    //ES6简写，等于routes：routes
})

//4.抛出这个这个实例对象方便外部读取以及访问
export default router

3.在一级页面配置跳转按钮以及要携带的参数

//1.点击后触发LinkShareFriend事件
    LinkShareFriend() {
      this.$router.push({
        name: "ShareFriend",
         params: {
              recordId:this.recordId,
              visitType:this.visitType,
         },
      });
    },

4.在二级页面ShareFriend配置并且接收路由传递的参数

<template>
    <div>
        你好
    </div>
</template>

<script>
export default {
    name:'ShareFriend',
    data(){
       return{
            visitType:this.$route.params.visitType,
            recordId:this.$route.params.recordId,
       }
    }
}
</script>

<style lang='less' scoped>

</style>

二：后退

<div @click="onClickLeft">返回</div>

    methods:{
        onClickLeft() {
          this.$router.go(-1)
        }
    }

三：配置App.vue跳转到路由首页Home.vue

1.先在router里面配置让Home.vue成为首页面

  {
    path: '/',
    name: 'Home',
    component: () =>
    import ('@/views/Home.vue')
  },

2. 在App.vue里面<router-view/>，此时首页面就是Home.vue了

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

参考  Vue路由（vue-router）详细讲解指南 - 有梦想的咸鱼前端 - 博客园