vue router 一个页面跳转到另一个页面实例

当你想要在一个页面中跳转到另一个页面时，你可以使用`<router-link>`组件或编程式导航。下面是两种方法的示例：

1. 使用 `<router-link>` 组件：

在你的模板中，使用 `<router-link>` 组件来创建一个链接，将其 `to` 属性设置为目标页面的路径。例如：

<router-link to="/other-page">Go to Other Page</router-link>

当用户点击该链接时，Vue Router会自动导航到目标页面。

2. 使用编程式导航：

在你的方法中，通过调用 `$router.push()` 方法来实现编程式导航。例如：

// 在某个方法中
this.$router.push('/other-page');

这将导航到名为 "other-page" 的页面。

无论你选择哪种方法，确保已经在路由器配置中定义了目标页面的路由规则。例如，在路由器配置中添加以下代码：

const routes = [
  { path: '/other-page', component: OtherPage }
]

在上述示例中，点击链接或调用 `$router.push()` 之后，Vue Router将会导航到名为 "OtherPage" 的组件。

请记住，在使用 Vue Router 之前，你需要安装和配置它。确保已经按照之前提到的步骤正确安装和配置了 Vue Router。

希望这些示例能够帮助你实现页面跳转！如有任何疑问，请随时提问。