在vue中使用this.$router.push带参跳转页面及取参

此方法不用请求到后台，只是前端页面的跳转

在 before.vue 中 

<template>
    <div>
        <div class="" @click="clickMe">点我跳转</div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      
    };
  },
  created() {},
  methods: {
     // 点击方法
     clickMe() {
        // path：从pages或views后面开始写(也就是放vue文件的根目录)
        // 大概目录结构如下
        // + api
        // + ...
        // - pages
        //    - before.vue  当前的文件
        //    - after.vue   要跳转过去的文件
        // vue的路由名默认就是文件名
        // query：存放参数（key:value,key:value,...,key:value）
        this.$router.push({path:'/after',query:{name:'斗苦故事'}});
     }
  }
};
</script>

<style>

</style>

在 after.vue 中

<template>
    <div>
        <p>我的博客名：{{this.name}}</p>
        <p>我的博客名：{{this.$route.query.name}}</p>
    </div>
</template>

<script>
export default {
  data() {
    return {
       // 取出传入的参数
       name: this.$route.query.name
    };
  },
  created() {},
  methods: {
     
  }
};
</script>

<style>

</style>

注：昨天写的文章，今天就又踩坑了，朋友们，以下两点需要注意：

① path后的路径，不要带 .vue 后缀

②  如果系统中设置了权限，一定要把路由配置好

欢迎来访我的vue专栏总篇博客 

希望能够帮助到你

over