vue点击按钮跳转页面
时间: 2023-09-29 15:06:15 浏览: 28
在Vue中,可以通过使用`<router-link>`标签或者`$router.push()`方法实现页面跳转。
使用`<router-link>`标签:
```html
<router-link to="/about">跳转到关于页面</router-link>
```
使用`$router.push()`方法:
```javascript
this.$router.push('/about');
```
其中,`/about`是要跳转的页面路径。请确保在Vue中已经正确配置了路由。
如果需要传递参数,可以在路径中使用动态路由或者查询字符串的方式。例如:
```html
<!-- 动态路由 -->
<router-link :to="'/user/' + userId">跳转到用户页面</router-link>
<!-- 查询字符串 -->
<router-link :to="{ path: '/search', query: { keyword: 'vue' } }">跳转到搜索页面</router-link>
```
```javascript
// 动态路由
this.$router.push('/user/' + userId);
// 查询字符串
this.$router.push({ path: '/search', query: { keyword: 'vue' } });
```
其中,`:to`绑定的是一个对象,可以通过`path`属性指定路径,通过`query`属性传递查询字符串参数。在动态路由中,可以通过路径中的参数来传递参数。例如,路径为`/user/:userId`,则可以通过`this.$route.params.userId`来获取参数值。