vue3.0 van-tabbar路由跳转
时间: 2023-07-05 21:10:47 浏览: 142
vue子路由跳转实现tab选项卡
你可以使用 Vue Router 来进行路由跳转。首先,你需要在 Vue 组件中引入 Vue Router:
```javascript
import { useRouter } from 'vue-router'
```
然后,你可以通过 `useRouter` 来获取路由对象:
```javascript
const router = useRouter()
```
接下来,在 `van-tabbar` 组件中,你可以通过 `@change` 事件来监听 tab 的切换:
```html
<van-tabbar @change="handleTabChange">
<van-tabbar-item icon="home-o">首页</van-tabbar-item>
<van-tabbar-item icon="search">搜索</van-tabbar-item>
<van-tabbar-item icon="friends-o">朋友</van-tabbar-item>
<van-tabbar-item icon="setting-o">设置</van-tabbar-item>
</van-tabbar>
```
在 `handleTabChange` 方法中,你可以使用 `router.push` 方法来进行路由跳转:
```javascript
handleTabChange(index) {
switch (index) {
case 0:
router.push('/')
break
case 1:
router.push('/search')
break
case 2:
router.push('/friends')
break
case 3:
router.push('/settings')
break
}
}
```
这样,当用户点击 `van-tabbar` 中的 tab 时,就会触发相应的路由跳转。
阅读全文