vue跳转方式（打开新页面）及传参操作示例

下面是一份详细的关于Vue跳转方式及传参操作的攻略。

Vue 跳转方式

在Vue中，可以通过 <router-link> 或 $router.push() 的方式进行页面跳转。

router-link

<router-link> 是Vue-Router提供的路由导航组件，可以通过 to 属性指定要跳转的路由地址。

语法如下：

<router-link :to="{ path: '/path/to/page' }">页面名称</router-link>

$router.push()

$router.push() 方法是Vue-Router提供的编程式导航方法，可以通过它实现在代码中进行路由跳转。

示例代码如下：

// 在Vue组件中
this.$router.push('/path/to/page');

在 $router.push() 方法中，可以指定路由地址、路由参数、查询参数等。

打开新页面

在Vue中，可以通过 <a> 标签或 JS 实现打开新页面。

标签

在Vue中，可以通过在 <a> 标签上添加 target="_blank" 属性实现打开新页面。

示例代码如下：

<a href="/path/to/page" target="_blank">页面名称</a>

JS

通过 JS 代码，可以实现打开新的浏览器标签页或窗口。

示例代码如下：

// 在Vue组件中
window.open('/path/to/page');

传参操作

在Vue中，可以通过 props 或路由参数传递数据到目标页面。

props

通过在目标组件中定义 prop，可以接收由上级组件传递过来的数据。

在使用 <router-link> 跳转时，可以通过 :to="{ path: '/path/to/page', query: { key: value }}" 的方式传递查询参数，在目标组件中使用 this.$route.query.key 可以获取到值。

在使用 $router.push() 方法跳转时，可以通过 props 的方式进行传递。示例代码如下：

this.$router.push({
  path: '/path/to/page',
  props: {
    key: value
  }
});

在目标组件中定义 prop，并使用 props 接收传递过来的值。示例如下：

// 在目标组件中
export default {
  props: ['key'],
  // ...
}

路由参数

通过在路由地址中定义参数，可以将参数传递到目标页面。

在使用 <router-link> 跳转时，可以通过 :to="{ path: '/path/to/page/:id' }" 的方式定义参数，在目标组件中使用 this.$route.params.id 可以获取到参数值。

在使用 $router.push() 方法跳转时，可以通过 path 传递路由参数。示例代码如下：

this.$router.push('/path/to/page/' + id);

在目标组件中使用 $route.params 可以获取到路由参数值。示例如下：

// 在目标组件中
export default {
  // ...
  created() {
    console.log(this.$route.params.id);
  }
}

以上就是Vue跳转方式（打开新页面）及传参操作的详细攻略了，希望能对你有所帮助。