物流网站建设策划书,威海网站建设在哪,设计网站,vue.js2.5 pc网站开发前言
vue-router 在新的标签页打开链接/路由#xff0c;由于官方没有提供对链接target属性的配置#xff0c;要实现这个需求#xff0c;需要自行实现#xff0c;这里提供几个方案供参考。
调用 API
vue-router 的路由实例除了常见的 push, replace, go 等接口#xff0…前言
vue-router 在新的标签页打开链接/路由由于官方没有提供对链接target属性的配置要实现这个需求需要自行实现这里提供几个方案供参考。
调用 API
vue-router 的路由实例除了常见的 push, replace, go 等接口还提供了一个很好用的接口 resolve可用于解析路由第一个参数类型与 push/replace 一致。
import { useRouter } from vue-routerconst router useRouter()function handleGoEditReport({ no }) {const target router.resolve({name: ReportDetail,params: { rid: no },})window.open(target.href, _blank)
}与 push 的使用差别不大
RouterView 组件
vue-router 的 RouterView 组件是在当前页面内跳转路由有些场景下会要求在新标签页中打开。
RouterView 组件实际上还是渲染成 a 标签参考源码
RouterView renderer 源码片段
// ...
setup(props, { slots }) {// ...return () {const children slots.default slots.default(link)return props.custom? children: h(a,{aria-current: link.isExactActive? props.ariaCurrentValue: null,href: link.href,// this would override user added attrs but Vue will still add// the listener, so we end up triggering bothonClick: link.navigate,class: elClass.value,},children)}
},
// ...该组件属性中也没有关于 target 的属性(源码)。
下面提供几个方案
1. 转为调用 API
参照上一部分的方法弃用 RouterView转成调用 API
2. 自定义链接组件
组合式 API - useLink
参照官网示例承接 RouterView 所有属性使用组合式 API 解析得到所需的链接信息再按具体需求生成目标路由链接。
3. 插槽 custom 属性
在 RouterLink 的 v-slot 中可以访问与 useLink 组合式函数相同的属性。
基于插槽与 custom 属性可以如下创建一个简单链接满足需求这一方案同上一方案比较类似都需要自行处理 isActive, isExactActive 等状态。原因参阅上面的源码片段
templaterouter-link :to{ name: ReportDetail, params: { rid: A00000001 } } :customtruetemplate #default{ href }a :hrefhref target_blankGO/a/template/router-link
/template4. 添加 vue 自定义指令-绑定路由 target
由于 RouterView 组件最终会渲染成 a 标签添加一个指令用于绑定链接的 target 属性即可
main.js 注册自定义指令:
import { createApp } from vue
import App from ./App.vueconst app createApp(App)app.directive(target, {mounted(el, binding) {// 将元素的 target 属性设置为绑定值const { value: target _blank } bindingel.setAttribute(target, target)},
})app.mount(#app)使用
templaterouter-link v-target :to{ name: ReportDetail, params: { rid: A00000001 } }GO/router-link
/template小节
RouterView 组件的“新标签页打开”需求个人更倾向于添加一个自定义指令
