vue-router4之组合式API
2023-09-11 14:19:18 时间
专栏目录请点击
访问当前路由
我们在setup函数中我们用useRouter
来访问this.$router
,使用useRoute
来访问this.$route
import { useRouter, useRoute } from 'vue-router'
export default {
setup() {
const router = useRouter()
const route = useRoute()
function pushWithQuery(query) {
router.push({
name: 'search',
query: {
...route.query,
},
})
}
},
}
其中route
是一个响应式的对象,所以我们可以对他的任何属性进行监听,但是应该尽量避免监听整个对象,应该直接监听希望改变的参数
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
export default {
setup() {
const route = useRoute()
const userData = ref()
// 当参数更改时获取用户信息
watch(
() => route.params.id,
async newId => {
userData.value = await fetchUser(newId)
}
)
},
}
导航守卫
在组合式api中只有离开守卫和更新守卫
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'
export default {
setup() {
// 与 beforeRouteLeave 相同,无法访问 `this`
onBeforeRouteLeave((to, from) => {
const answer = window.confirm(
'Do you really want to leave? you have unsaved changes!'
)
// 取消导航并停留在同一页面上
if (!answer) return false
})
const userData = ref()
// 与 beforeRouteUpdate 相同,无法访问 `this`
onBeforeRouteUpdate(async (to, from) => {
//仅当 id 更改时才获取用户,例如仅 query 或 hash 值已更改
if (to.params.id !== from.params.id) {
userData.value = await fetchUser(to.params.id)
}
})
},
}
useLink
import { RouterLink, useLink } from 'vue-router'
import { computed } from 'vue'
export default {
name: 'AppLink',
props: {
// 如果使用 TypeScript,请添加 @ts-ignore
...RouterLink.props,
inactiveClass: String,
},
setup(props) {
const { route, href, isActive, isExactActive, navigate } = useLink(props)
const isExternalLink = computed(
() => typeof props.to === 'string' && props.to.startsWith('http')
)
return { isExternalLink, href, navigate, isActive }
},
}
相关文章
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
- Laravel + Vue + element-ui 【前端项目一】vue 实现查看更多 5
- Vue项目--尚品汇(axios重写,代理服务器、API统一管理)
- 02-vue基础-Vue常用特性
- 一、移动端商城 Vue 组件库
- vue项目中两种回车键搜索功能实现
- laravel 5.5 api接口开发:JWT安装+实现API token 认证
- Vue脚手架(vue-cli)搭建和目录结构详解
- Vue实战第1章:学习和使用vue-router
- vue 完全入门系列 之 前置知识-ES6模块化/Promise/async|await/EventLoop/宏任务|微任务/API接口案例
- 解决:Vue调试工具vue-devtools安装方法——解决下载速度缓慢,安装报错问题
- Vue脚手架报错: Component name “xxx“ should always be multi-word(vue/multi-word-component-names)的解决办法
- Vue学习第30天——router-link的push和replace属性
- vue mock 模拟后端api接口
- vue 登录页背景-粒子特效(Vue-Particles)