编程式导航：在Vue Router中实现编程式导航

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

引言

在Vue Router中，除了使用<router-link>组件进行声明式导航外，还可以通过编程式的方式来进行路由跳转。编程式导航提供了更多的灵活性和控制力，允许我们在JavaScript代码中根据应用的状态或用户的交互来决定何时以及如何进行路由跳转。

编程式导航的基本方法

Vue Router提供了两个主要的API来进行编程式导航：router.push和router.replace。

router.push

router.push方法用于向浏览器的历史堆栈中添加一个新的记录，用户可以通过浏览器的后退按钮返回到前一个页面。

// 字符串路径
router.push('/home');

// 对象路径
router.push({ path: '/home' });

// 带有查询参数
router.push({ path: '/home', query: { plan: 'private' } });

// 命名路由
router.push({ name: 'user', params: { userId: 123 } });

router.replace

router.replace方法与router.push类似，但它不会在历史堆栈中添加新的记录，而是替换掉当前的历史记录。

// 字符串路径
router.replace('/home');

// 其他用法与router.push相同

在组件中使用编程式导航

在Vue组件中，可以通过this.$router（Vue 2）或useRouter钩子（Vue 3）来访问路由器实例，从而调用上述方法。

// Vue 2
export default {
methods: {
goToHome() {
this.$router.push('/home');
}
}
};

// Vue 3
import { useRouter } from 'vue-router';

export default {
setup() {
const router = useRouter();

function goToHome() {
router.push('/home');
}

return { goToHome };
}
};

结论

编程式导航为开发者提供了在Vue应用程序中进行路由控制的强大工具。通过router.push和router.replace方法，我们可以根据应用逻辑灵活地进行页面跳转，从而实现更为复杂和动态的用户体验。在实际开发中，应根据具体场景选择合适的导航方法。