VueRouter4通过props传参

使用动态路径进行传参

如果只是传递简单的参数，可用通过动态路径参数进行传参。运行案例

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes: [
    // 进入后默认跳转到的路由
    {
      path: '/',
      redirect: '/home/默认跳转的时候需要给一个默认值,否则home会因为没有默认path而报错(三)'
    },
    { 
      path: '/home/:msg', 
      name: 'home',
      component: Home,
      props: true
    },
    { 
      path: '/about/:username', 
      name: 'about',
      component: About,
      props: true
    }
  ]
});

像path:'/home/:msg', 这样的就是路径参数。

在Home组件中，点击跳转到about组件：

template： `<div @click="goAbout"> Home {{msg}}</div>`,
props: ['msg'],
methods: {
goAbout() {
      // 每次点击的时候 向about组件的props传递值，
      this.$router.push({
        path: '/about/123',
        // 这里不能使用query，否则会提示No match found for location with path "/about/" 
需要直接将参数拼接在path中，而且当有path时候，会自动忽略params
      });
    }
}

path:'/about/123' 123 就是匹配到 path: 'about/:username 的username

在about组件中点击跳转到home组件：

template: '<div @click="goHome">About组件，点我跳转到home组件, 我的名字是：{{username}}</div>' ,
  // 使用props接收home路由传递的param参数
  props: {
    username: {
      type: String,
      default() {
        return '';
      }
    }
  },
  methods: {
    goHome() {
      this.$router.push({
        path: '/home/这是通过about组件传的msg'
      });
    }
  }

在home组件中，可以通过：

const params = this.$route.params;

来获取浏览器url中的参数。比如this.$route.params.id等。

参考：https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html

使用params进行传参

如果只是传递复杂的参数，可用通过此方式进行传参。点我运行案例

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 每个路由都需要映射到一个组件。
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes: [
    // 进入后默认跳转到的路由
    {
      path: '/',
      redirect: '/home'
    },
    { path: '/home', 
      name: 'home',
      component: Home,
      props: true
    },
    { path: '/about', 
      name: 'about',
      component: About,
      props: true
    }
  ]
});

对两个组件进行更改

const Home = { 
  template: `
    <div @click="goAbout">
      Home组件，点我跳转到about组件
      {{msg}}
    </div>
  `,
  props: ['msg'],
  methods: {
    goAbout() {
      // 每次点击的时候 向about组件的props传递值，
      this.$router.push({
        // 当使用name的时候，必须使用params
        // // 当 props 设置为 true 时，route.params 将被设置为组件的 props。
        name: 'about',
        params: {
          username: 'wubin.work'
        }
      });
    }
  }
};
const About = { 
  template: '<div @click="goHome">About组件，点我跳转到home组件, 我的名字是：{{username}}</div>' ,
  // 使用props接收home路由传递的param参数
  props: {
    username: {
      type: String,
      default() {
        return '';
      }
    }
  },
  methods: {
    goHome() {
      this.$router.push({
        name: 'home',
        params: {
          msg: '这是通过about组件传的msg!'
        }
      });
    }
  }
};

当使用路径传参时，可能遇到的问题

[Vue Router warn]: No match found for location with path "/home"

导致这个问题的原因：在路由配置了参数路径 path:'/home/:msg'， 但是，跳转的路径没有参数：

vue-router4-props/path.html#/home/这里应该有参数！而导致报错

正确应该是/vue-router4-props/path.html#/home/somestr

vue-router.mjs:35 [Vue Router warn]: Discarded invalid param(s) "photoBase64" when navigating. See https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 for more details.

这个报错的意思是：

Discarded invalid param(s) "msg" when navigating 且传递的数据丢失

问题分析：路由在导航时丢弃无效参数“msg”

修改方法也简单：

修改router/index.js

 { path: '/about/:msg', 
      name: 'about',
      component: About,
      props: true
    }

最终改为：

 const router = VueRouter.createRouter({
      history: VueRouter.createWebHashHistory(),
      routes: [
        // 进入后默认跳转到的路由
        {
          path: '/',
          redirect: '/home/:msg'
        },
        { path: '/home/:msg', 
          name: 'home',
          component: Home,
          props: true
        },
        { path: '/about/:username', 
          name: 'about',
          component: About,
          props: true
        }
      ]
    });

附件下载

相关资料