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

墨蓝 2022-04-11 14:11 283阅读 0赞

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

**在 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专栏总篇][vue]博客**

希望能够帮助到你

over

[vue]: https://blog.csdn.net/qq_41402200/article/details/84390947