改成 <script setup>写法
时间: 2023-07-28 12:06:48 浏览: 53
当使用 `<script setup>` 时,`methods` 需要使用 `defineExpose` 方法来暴露出去。同时,需要使用 `useRouter` 和 `useRoute` 方法来获取路由实例和当前路由信息。代码如下:
```
<template>
<div>
<!-- 登录表单 -->
<form>
<!-- 表单内容 -->
<button type="submit" @click.prevent="login">登录</button>
</form>
</div>
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const login = () => {
// 登录成功后跳转到之前要访问的页面
router.push({
path: '/',
query: { redirect: route.fullPath }
})
}
defineExpose({ login })
</script>
```
其中,`useRouter` 和 `useRoute` 是 Vue Router 提供的 Composition API,用于在 `<script setup>` 中获取路由实例和当前路由信息。`login` 方法在定义后,需要通过 `defineExpose` 方法暴露出去,以便在模板中使用。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)