关于vue路由的工作笔记（路由传参和url明明跳转但页面不刷新的原因）

最新推荐文章于 2025-09-18 09:45:00 发布

原创最新推荐文章于 2025-09-18 09:45:00 发布 · 741 阅读

2 ·

CC 4.0 BY-SA版权

本文详细探讨了Vue路由中参数传递的方式，包括如何进行路由传参以及遇到URL改变但页面未刷新的问题。通过对官方路由文档的深入学习，解析了相关机制并提供了解决方案。

官方路由文档

 
        1. 路由的参数传递问题：
            使用路由导航传递参数格式：
                this.$router.push({
                    name: '组件别名',
                    params: {参数名： 值},
                })
             接收参数分两步：
                在路由中：
                    path：使用/：参数名 进行拼接，并且多个参数可以在后面直接进行拼接
                    props: router=>({ 获取参数
                        参数名： router.params.参数名
                    })
                在组件中：
                    props：【'参数名'】，
                    data：参数名
          2. 注意，不能在同一页面下使用路由导航进行跳转页面，即使是重定向也不行。
             例： 所在页面的路由:
                    {
                       path: '/aaaaaa',
                       redirect: '/aaaaaa/bbbbb',
                       component: 'aaaaaa',
                       children:{
                            path:'/aaaaaa/bbbbb',
                            component: 'bbbbbb',
                       }
                     }
                  在此页面下进行路由导航：
                        this.$router.push('/aaaaaa') 或 this.$router.push('/aaaaaa/bbbbbb'),
                        是不行的，这样的路由导航不会触发。
            3. 如果在父组件的页面中，进行子组件的路由导航，子组件是不会调用生命周期函数的，即，没有销毁再创建的过程。
                即使传递参数来改变路由也一样，需要通过watch来进行监听路由的变化，具体参考官方文档
              例：
                 {
                       path: '/aaaaaa',
                       redirect: '/aaaaaa/bbbbb',
                       component: 'aaaaaa',
                       children:
                       {
                            path:'/aaaaaa/bbbbb',
                            component: 'bbbbbb',
                       }，
                       {
                            path:'/aaaaaa/cccccc',
                            component: 'cccccc',
                       }
                  }
             在父组件页面下进行路由导航：
                this.$router.push('/aaaaaa/ccccccc') 到 this.$router.push('/aaaaaa/bbbbbb'),
             需要在bbbbbb组件中调用watch函数
                watch：{
                    $route(to,from){
                    //具体操作bbbbbbb组件的内容
                    onload(); //此处的函数为异步加载 bbbbbb组件的函数，按需求使用
                    }
                }