Vue3 路由变化监听与传参

官方文档

• https://router.vuejs.org/zh/api/#routelocationraw
• https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#响应路由参数的变化

传参

// 这三种形式是等价的
router.push('/users/posva#bio');
router.push({ path: '/users/posva', hash: '#bio' });
router.push({ name: 'users', params: { username: 'posva' }, hash: '#bio' });
// 只改变 hash
router.push({ hash: '#bio' });
// 只改变 query
router.push({ query: { page: '2' } });
// 只改变 param
router.push({ params: { username: 'jolyne' } });

监听

const User = {
  template: '...',
  created() {
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        // 对路由变化做出响应...
      }
    );
  },
};

问题及解决方法

1. 页面跳转传了 params 但是无效

原来的代码

router.push({
  path: '/Car/Appointment',
  params: { address: index },
  query: { address: index },
});

解决方法

传 params 的时候要传 name

router.push({
  path: '/Car/Appointment',
  params: { address: index },
  query: { address: index },
  name: 'Appointment',
});

2. 监听不到变化

加入 { immediate: true, deep: true } 就可以了

const route = useRoute();
watch(
  () => route.params,
  () => {
    const { address: getAddress }: any = route.params;
    if (getAddress) {
      address.value = getAddress;
    }
  },
  { immediate: true, deep: true }
);

相关文章

• https://blog.csdn.net/weixin_42331327/article/details/106787273
• https://stackoverflow.com/questions/68148887/vue3-router-push-doesnt-update-the-component-when-url-match-the-same-route
• https://router.vuejs.org/zh/guide/advanced/data-fetching.html#导航完成后获取数据
• https://blog.csdn.net/qq_41777791/article/details/113100730
• https://blog.csdn.net/SmartJunTao/article/details/123136616
• https://www.codeleading.com/article/83565732968/

后记

感谢群里 @南京_unbreakable 和 @追寻 的提示和帮助