• 【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法


    目录

    一、Vue监控路由

    1、Vue中watch监控路由

    2、Vue中watch监控路由的某一个参数

    3、Vue中watch同时监控多个路由

    二、刷新当前页面数据

    1、location.reload

    2、$router.go(0)

    3、this.$router.resolve()与this.$router.resolve()

    a、this.$router.resolve()

    b、this.$router.push()

    三、示例场景

    四、往期相关优质推荐


    一、Vue监控路由

    1、Vue中watch监控路由

            如果你想要监控整个路由对象的变化,包括路由路径、参数、查询参数等的变化,可以使用`$route`对象进行监控。以下是一个使用`watch`监控整个路由对象的示例:

    1. <template>
    2. <div>
    3. <div>{{ monitoredRoute }}div>
    4. div>
    5. template>
    6. <script>
    7. export default {
    8. data() {
    9. return {
    10. monitoredRoute: null, // 用于存储监控的路由信息
    11. };
    12. },
    13. watch: {
    14. '$route'(newRoute) {
    15. this.monitoredRoute = newRoute; // 将新的路由信息保存到组件的monitoredRoute属性中
    16. // 执行其他操作或调用其他方法
    17. },
    18. //或
    19. $route(newRoute) {
    20. this.monitoredRoute = newRoute; // 将新的路由信息保存到组件的monitoredRoute属性中
    21. // 执行其他操作或调用其他方法
    22. },
    23. },
    24. };
    25. script>

    在这个示例中,我们在组件的`data`选项中定义了一个`monitoredRoute`属性,用于存储监控的路由信息。在`watch`选项中,使用`'$route'`来指定要监控的路由对象。当路由发生变化时,`watch`函数会被触发,将新的路由信息保存到组件的`monitoredRoute`属性中。

    你可以根据需要在`watch`函数中执行其他操作或调用其他方法,例如根据路由信息更新组件的状态、重新加载数据等。

    请注意,上述示例中的`monitoredRoute`是一个示例属性名,你可以根据需要将其替换为你自己定义的属性名。

    2、Vue中watch监控路由的某一个参数

    在Vue中,可以使用`watch`选项来监控路由的某一个参数的变化。以下是一个使用`watch`监控路由参数的示例:

    1. <template>
    2. <div>
    3. <div>{{ monitoredParam }}div>
    4. div>
    5. template>
    6. <script>
    7. export default {
    8. data() {
    9. return {
    10. monitoredParam: null, // 用于存储监控的参数值
    11. };
    12. },
    13. watch: {
    14. '$route.params.monitoredParam'(newValue) {
    15. this.monitoredParam = newValue; // 将新的参数值保存到组件的monitoredParam属性中
    16. // 执行其他操作或调用其他方法
    17. },
    18. },
    19. };
    20. script>

    在这个示例中,我们在组件的`data`选项中定义了一个`monitoredParam`属性,用于存储监控的参数值。在`watch`选项中,使用`'$route.params.monitoredParam'`来指定要监控的路由参数。当监控的参数发生变化时,`watch`函数会被触发,将新的参数值保存到组件的`monitoredParam`属性中。

    你可以根据需要在`watch`函数中执行其他操作或调用其他方法,例如根据参数值更新组件的状态、重新加载数据等。

    请注意,上述示例中的`monitoredParam`是一个示例参数名,你需要将其替换为你要监控的实际参数名。另外,如果你还需要监控其他路由参数,可以在`watch`选项中添加相应的监控函数。

    3、Vue中watch同时监控多个路由

    1. <template>
    2. <div>
    3. <div>{{ monitoredRoute }}div>
    4. <div>{{ monitoredParam }}div>
    5. div>
    6. template>
    7. <script>
    8. export default {
    9. data() {
    10. return {
    11. monitoredRoute: null, // 用于存储监控的路由信息
    12. monitoredParam: null, // 用于存储监控的参数值
    13. };
    14. },
    15. watch: {
    16. '$route'(newRoute) {
    17. this.monitoredRoute = newRoute; // 将新的路由信息保存到组件的monitoredRoute属性中
    18. // 执行其他操作或调用其他方法
    19. },
    20. '$route.params.monitoredParam'(newValue) {
    21. this.monitoredParam = newValue; // 将新的参数值保存到组件的monitoredParam属性中
    22. // 执行其他操作或调用其他方法
    23. },
    24. },
    25. };
    26. script>

    二、刷新当前页面数据

    1、location.reload

    Vue.js中,可以使用`location.reload()`方法重新加载当前页面。这个方法会导致浏览器重新发送请求并重新加载页面。

    要在Vue组件中使用`location.reload()`,可以在需要重新加载页面的地方调用该方法。例如,在一个按钮的点击事件处理程序中:

    1. methods: {
    2. reloadPage() {
    3. location.reload();
    4. }
    5. }

    然后,在模板中使用这个方法:

    <button @click="reloadPage">重新加载页面button>

    当用户点击按钮时,页面将会重新加载。

    需要注意的是,`location.reload()`方法会导致页面完全重新加载,包括重新执行Vue实例的生命周期钩子函数。这可能会导致数据丢失,因为重新加载后,Vue实例将会被重置。

    如果你只是想重新加载某个组件或重新获取数据,而不是整个页面,你可以考虑使用Vue的其他方法,如重新发起异步请求或重新设置组件的数据。

    2、$router.go(0)

            在Vue.js中,可以使用`$router.go()`方法进行路由导航。该方法用于在路由之间进行前进或后退操作。`$router.go()`方法接受一个整数作为参数,表示前进或后退的步数。正数表示前进,负数表示后退。

    下面是`$router.go()`方法的使用方法示例:

    序号代码释义
    1this.$router.go(-1);  // 后退+刷新;
    2this.$router.go(0);   // 刷新;
    3this.$router.go(1);   // 前进一步
    4this.$router.go(2);   // 前进两步
    5this.$router.go(n);   // 前进n个页面

    你可以在Vue组件的方法中使用`$router.go()`方法来触发路由导航。例如,在一个按钮的点击事件处理程序中:

    1. methods: {
    2. goForward() {
    3. this.$router.go(1);
    4. },
    5. goBack() {
    6. this.$router.go(-1);
    7. }
    8. }

    然后,在模板中使用这些方法:

    1. <button @click="goForward">前进button>
    2. <button @click="goBack">后退button>

    当用户点击"前进"按钮时,将向前导航一步。当用户点击"后退"按钮时,将后退一步。

    需要注意的是,`$router.go()`方法只能在使用Vue Router进行路由管理的应用程序中使用。如果你的应用程序没有配置Vue Router,或者当前路由没有前进或后退的历史记录,`$router.go()`方法可能不会产生任何效果。

    3、this.$router.resolve()与this.$router.resolve()

            `this.$router.resolve()`和`this.$router.push()`是Vue Router中的两个不同的方法,用于处理路由相关的操作,但它们有不同的作用和使用方式。

    a、this.$router.resolve()

    • 作用:用于解析路由的相关信息,而不进行实际的导航操作。
    • 使用方式:接受一个路由路径作为参数,并返回一个Promise对象,该Promise对象包含解析后的路由信息。
    •  示例:
    1. const resolvedRoute = this.$router.resolve('/example-route');
    2. resolvedRoute.then(route => {
    3. // 处理解析后的路由信息
    4. });

    b、this.$router.push()

    • 作用:用于进行路由导航,将用户导航到指定的路由。
    • 使用方式:接受一个路由路径或一个描述路由的对象作为参数,进行实际的导航操作。
    • 示例:
    1. // 导航到指定路由路径
    2. this.$router.push('/example-route');
    3. // 导航到带参数的路由
    4. this.$router.push({ path: '/example-route', query: { id: 1 } });

    使用`this.$router.resolve()`方法时,你可以获取解析后的路由信息,但它并不会触发实际的路由导航。而使用`this.$router.push()`方法时,会将用户导航到指定的路由路径或描述的路由对象。

    因此,如果你只需要获取解析后的路由信息而不进行实际的导航操作,可以使用`this.$router.resolve()`方法。如果需要进行实际的路由导航,应该使用`this.$router.push()`方法。

    三、示例场景

           比如一个页面需要有可能跳转到相同页面,  也可能跳转到不同页面, 为了体验更好,  可以综合情况判断使用那种刷新方式。

    1. //页面类型变化直接
    2. '$route.query.type'(newValue) {
    3. this.$router.push("/xx/yy_detail?type=0&id=" + row.id);
    4. }
    5. //相同页面相同数据但需要重新渲染(条件结合具体情况)
    6. '$route.query.xx'(newValue) {
    7. this.$router.go(0);
    8. }
    9. //相同页面不同数据
    10. '$route'(newValue) {
    11. this.init();
    12. },
    13. methods: {
    14. init(){
    15. this.detail();
    16. this.$refs["ppData"].flush(this.$route.query.id);
    17. this.$refs["fileData"].flush(this.$route.query.id);
    18. this.$refs["child3"].flush(this.$route.query.id);
    19. this.$refs["child4"].flush(this.$route.query.id);
    20. this.$refs["child5"].flush(this.$route.query.id);
    21. this.$refs["child6"].flush(this.$route.query.id);
    22. },
    23. },

    四、往期相关优质推荐

    有用请点赞,养成良好习惯!

    疑问、交流、鼓励请留言!

  • 相关阅读:
    PyTorch 分类问题引入
    附录7-使用bootstrap组件
    【大体思路】rv1126 跑通 yolov5
    C++‘s most vexing parse
    探索 GAN 和 VAE 之外的 NLP 扩散模型
    Volatile 可以保证什么特性?有什么作用?
    L1-028 判断素数
    LeetCode220814-20_84、最长连续序列
    交易所通用质押式回购
    苏三说:今年测试行业企业招聘的真相
  • 原文地址:https://blog.csdn.net/libusi001/article/details/133343443