Vue-router的编程式导航

什么是编程式导航？

编程式导航是指通过编程的方式，而非模板中的声明式路由链接，来导航到应用程序中的不同页面。在Vue Router中，通常通过this.$router对象来实现。

使用方法

编程式导航的基本用法是通过this.$router.push()或this.$router.replace()方法将用户导航到指定的路径。两者之间的主要区别是，push()会将新路由添加到浏览器的历史记录中，而replace()则会替换当前的历史记录条目。

一.push()的用法

<template>
  <button @click="goToHome">Go to Home</button>
</template>

<script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/home');
    },
  },
};
</script>

在这个例子中，点击按钮将通过push()方法将用户导航到“/home”路径。

二.replace()的用法

<template>
  <button @click="replaceWithHome">Replace with Home</button>
</template>

<script>
export default {
  methods: {
    replaceWithHome() {
      this.$router.replace('/home');
    },
  },
};
</script>

这里，我们使用replace()来将当前页面替换为“/home”，这样当前页面不会被保存到浏览器的历史记录中。

三.forward的用法

forward()方法相当于浏览器的前进按钮，向前一步。

<template>
  <button @click="forwardPage">Forward</button>
</template>

<script>
export default {
  methods: {
    forwardPage() {
      // 前进一步
      this.$router.forward();
    }
  }
}
</script>

四.back的用法

back()方法相当于浏览器的后退按钮，向后一步。

<template>
  <button @click="backPage">Back</button>
</template>

<script>
export default {
  methods: {
    backPage() {
      // 后退一步
      this.$router.back();
    }
  }
}
</script>

五.go(n)的用法

go()方法可以向前或向后导航n步，正数表示向前，负数表示向后。

<template>
  <button @click="goBackTwoSteps">Go Back 2 Steps</button>
</template>

<script>
export default {
  methods: {
    goBackTwoSteps() {
      // 后退两步
      this.$router.go(-2);
    }
  }
}
</script>

传递参数和查询字符串

编程式导航也可以传递参数或查询字符串。例如：

<script>
export default {
  methods: {
    goToUser(userId) {
      this.$router.push({ name: 'UserProfile', params: { id: userId } });
    },
    goToSearch(query) {
      this.$router.push({ path: '/search', query: { q: query } });
    },
  },
};
</script>

在这个例子中，goToUser方法通过params对象传递用户ID，而goToSearch方法通过query对象传递查询参数。

错误处理

在使用编程式导航时，可能会遇到一些错误。例如，如果试图导航到当前所在的页面，Vue Router会抛出一个错误。为了避免这种情况，可以使用catch来处理错误

<script>
export default {
  methods: {
    safePush(route) {
      this.$router.push(route).catch((err) => {
        if (err.name !== 'NavigationDuplicated') {
          console.error(err);
        }
      });
    },
  },
};
</script>