在Vue.js中使用Vue Router进行页面跳转时,可以使用以下几种方法:

  1. 使用<router-link>标签进行跳转

    <router-link to="/path">Link Text</router-link>
    

  2. 使用$router.push()方法进行跳转

    this.$router.push('/path');
    

  3. 使用$router.replace()方法进行跳转,此方法和$router.push()方法相似,但是不会保留浏览器的历史记录。

    this.$router.replace('/path');
    

  4. 使用$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');
  }
}

Logo

前往低代码交流专区

更多推荐