vue如何跳转到新页面

在 Vue 中可以使用 `router-link` 或 `router.push` 来实现跳转到新页面。

1. 使用 `router-link`:

<router-link to="/newpage">跳转到新页面</router-link>

2. 使用 `router.push`:

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

需要注意的是，使用 `router-link` 可以直接在模板中使用，而 `router.push` 则需要在组件中使用。另外，在使用 `router.push` 的时候，需要在组件中先引入 `vue-router`，并且通过 `this.$router` 来访问路由对象。

相关问题

vue跳转到新页面后并执行函数

在 Vue.js 中，可以使用 `mounted` 钩子函数来在挂载组件之后执行函数。具体来说，可以在组件中通过 `$router.push` 方法实现页面跳转，并在跳转后的组件中使用 `mounted` 钩子函数来执行需要的函数。

示例代码如下：

// 跳转到新页面
this.$router.push('/new-page')

// 在新页面中执行函数
export default {
  mounted() {
    this.doSomething()
  },
  methods: {
    doSomething() {
      // 执行需要的函数
    }
  }
}

在上面的示例代码中，我们使用 `$router.push` 方法来跳转到新页面，然后在新页面的组件中使用 `mounted` 钩子函数来执行需要的函数。在实际应用中，可以根据自己的需求来调整需要执行的函数和跳转的方式。

vue跳转到新页面后并执行本界面的回调函数

在 Vue.js 中，可以使用路由参数来实现页面跳转并传递数据，在跳转后的组件中可以通过 `props` 或 `watch` 来监听传递的数据并执行回调函数。

具体实现步骤如下：

1. 在跳转时通过路由参数传递回调函数。

// 在当前组件中跳转到新页面并传递回调函数
this.$router.push({ path: '/new-page', query: { callback: this.callback } })

2. 在新页面的组件中获取传递的回调函数并绑定到组件实例的属性中。

export default {
  props: {
    callback: {
      type: Function,
      required: true
    }
  },
  mounted() {
    // 在组件挂载后执行回调函数
    this.callback()
  }
}

3. 在新页面的组件中监听 `props` 的变化，当回调函数发生变化时执行回调函数。

export default {
  props: {
    callback: {
      type: Function,
      required: true
    }
  },
  mounted() {
    // 在组件挂载后执行回调函数
    this.callback()
  },
  watch: {
    callback(newCallback) {
      // 当回调函数发生变化时执行回调函数
      newCallback()
    }
  }
}

在上面的示例代码中，我们通过路由参数传递了回调函数，并在新页面的组件中获取了该函数并绑定到组件实例的属性中。然后，在组件挂载后执行该回调函数。此外，我们还监听了 `props` 的变化，当回调函数发生变化时执行回调函数。