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

美美| ू•ૅω•́)ᵎᵎᵎ

已于 2022-03-27 20:00:54 修改

阅读量813

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端

于 2021-12-30 09:53:17 首次发布

本文链接：https://blog.csdn.net/lazylYYY/article/details/122229421

版权

vue 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用vue-router进行页面配置和导航。首先，通过安装和实例化Vue Router来设置路由。接着，展示了在一级页面中如何配置跳转按钮并传递参数到二级页面。在二级页面中，接收到并显示了路由传递的参数。此外，还演示了如何实现返回上一级页面的功能，并在App.vue中配置路由以使Home.vue成为首页。这是一篇关于Vue.js前端开发中路由管理的实践教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：前进

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）详细讲解指南 - 有梦想的咸鱼前端 - 博客园