vue.js提供了三种跳转方式:原生 javascript api:使用 window.location.href 进行跳转。vue router:使用 标签或 this.$router.push() 方法进行跳转。vuex:通过 dispatch action 或 commit mutation 来触发路由跳转。
Vue.js 跳转方式
1. 原生 JavaScript API
使用原生 JavaScript API 跳转页面:
window.location.href = 'new-page.html';
2. Vue Router
Vue Router 是 Vue.js 的官方路由库,提供了更完善的路由管理功能:
-
标签: 创建一个带有跳转属性的链接。<router-link to="/new-page">跳转到新页面</router-link>
-
this.$router.push() 方法:在当前路由栈中添加新路由。
立即学习“前端免费学习笔记(深入)”;
this.$router.push('/new-page');
-
this.$router.replace() 方法:替换当前路由,不会出现在历史记录中。
this.$router.replace('/new-page');
3. VueX
VueX 是 Vue.js 的状态管理库,可以用它来触发路由跳转:
-
Action:提交一个 action 来触发路由跳转。
store.dispatch('changeRoute', '/new-page');
-
Mutation:在 mutation 中调用 $router.push() 或 $router.replace() 方法。
store.commit('changeRoute', { path: '/new-page' });
选择合适的方式
选择哪种跳转方式取决于具体需求:
- 原生 JavaScript API 适用于简单的情况。
- Vue Router 提供完善的路由管理,适合复杂路由结构。
- VueX 适用于需要通过状态管理来触发路由跳转的情况。
以上就是vue引入方式怎么跳转的详细内容,更多请关注php中文网其它相关文章!
版权声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系 yyfuon@163.com