Vue2路由跳转方法
生命周期函数中导入Vue Router,并且需要使用。方法相似,但是不会保留浏览器的历史记录。值得注意的是,在Vue的组件内使用。方法进行跳转,此方法和。对象时,需要先在组件的。方法进行历史记录跳转。
·
在Vue.js中使用Vue Router进行页面跳转时,可以使用以下几种方法:
-
使用<
router-link>
标签进行跳转<router-link to="/path">Link Text</router-link>
-
使用
$router.push()
方法进行跳转this.$router.push('/path');
-
使用
$router.replace()
方法进行跳转,此方法和$router.push()
方法相似,但是不会保留浏览器的历史记录。this.$router.replace('/path');
-
使用
$router.go()
方法进行历史记录跳转// 后退一步 this.$router.go(-1); // 前进一步 this.$router.go(1);
值得注意的是,在Vue的组件内使用$router
对象时,需要先在组件的mounted()
生命周期函数中导入Vue Router,并且需要使用this.$router
来访问。
import VueRouter from 'vue-router';
export default {
mounted() {
// 导入Vue Router
Vue.use(VueRouter);
// 使用this.$router访问Vue Router对象
this.$router.push('/path');
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)