Vuetify:如何配置 VueRouter 以在新选项卡上打开 link?
Vuetify : How to configure VueRouter to open link on a new tab?
我有一个带有用户可以单击的菜单的导航栏。一些链接将需要打开一个新标签。这就是我所拥有的,但我无法让它工作。
<template>
<nav>
<v-app-bar text app color="blue">
<v-app-bar-nav-icon class="white--text" @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-app-bar-title class="text-uppercase white--text">
<span class="font-weight-light">Logo</span>
<span>Global</span>
</v-app-bar-title>
</v-app-bar>
<v-navigation-drawer v-model="drawer" app class="grey lighten-1">
<v-list>
<img class="ml-5 mb-3" src="../assets/Logo-Blue.png" width="70" />
<v-list-item v-for="link in links" :key="link.text" router :to="link.route" @click="go(link)">
<v-list-item-action>
<v-icon>{{ link.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title> {{ link.text }} </v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</nav>
</template>
<script>
export default {
data() {
return {
drawer: true,
links: [
{ icon: 'home', text: 'Dashboard', route: '/dashboard', newTab: false },
{ icon: 'leaderboard', text: 'Stats', route: 'www.google.com ', newTab: true },
]
}
},
methods: {
go(link) {
console.log('go run ...')
console.log(link)
console.log(process.env.APP_URL)
if (!link.newTab) {
this.$router.push({ path: link.route })
} else {
window.open(link.route)
}
}
}
}
</script>
src/router/index.js
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
我做错了什么吗?
打开一个新标签似乎可以工作,但它一直在我的本地主机前面添加 URL。
不要将 click
-处理程序与 v-list-item
一起使用,因为这会破坏为路由生成的底层锚标记,并且会影响可访问性。坚持使用内置路由的 v-list-item
道具:
href
:要使用 <v-list-item>
创建外部 link,请使用 href
属性.内部 links 应该改用 to
。
target
:要在单击 link 后打开新的 window,请使用 target="_blank"
道具
A v-list-item
links 到外部 URL 会像这样使用 href
道具:
<v-list-item href="https://google.com">Google</v-list-item>
打开新标签页的人将使用 target="_blank"
属性:
<v-list-item target="_blank" href="https://google.com">Google</v-list-item>
内部 link 使用 to
属性而不是 href
:
<v-list-item to="/dashboard">Dashboard</v-list-item>
它们也可以用 target="_blank"
在新标签页中打开:
<v-list-item target="_blank" to="/dashboard">Dashboard</v-list-item>
解决方案
在你的例子中,你有一组项目需要有条件地绑定前面提到的道具。最好使用 v-bind
with an object(对象的键值对绑定为组件道具),它是根据每个项目的属性计算的:
- Compute 一个新的 link 数组(名为
computedLinks
),它有一个要绑定的新道具(名为 linkProps
):
export default {
computed: {
computedLinks() {
return this.links.map(link => {
const isExternalLink = url => /^((https?:)?\/\/)/.test(url)
const linkProps = {
[isExternalLink(link.route) ? 'href' : 'to']: link.route,
}
if (link.newTab) {
linkProps.target = '_blank'
}
return {
...link,
linkProps,
}
})
},
},
}
- 更新模板以使用
computedLinks
,并将每个 link 的 linkProps
绑定到其对应的 v-list-item
:
<v-list-item v-for="link in computedLinks" :key="link.text" v-bind="link.linkProps">
我有一个带有用户可以单击的菜单的导航栏。一些链接将需要打开一个新标签。这就是我所拥有的,但我无法让它工作。
<template>
<nav>
<v-app-bar text app color="blue">
<v-app-bar-nav-icon class="white--text" @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-app-bar-title class="text-uppercase white--text">
<span class="font-weight-light">Logo</span>
<span>Global</span>
</v-app-bar-title>
</v-app-bar>
<v-navigation-drawer v-model="drawer" app class="grey lighten-1">
<v-list>
<img class="ml-5 mb-3" src="../assets/Logo-Blue.png" width="70" />
<v-list-item v-for="link in links" :key="link.text" router :to="link.route" @click="go(link)">
<v-list-item-action>
<v-icon>{{ link.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title> {{ link.text }} </v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</nav>
</template>
<script>
export default {
data() {
return {
drawer: true,
links: [
{ icon: 'home', text: 'Dashboard', route: '/dashboard', newTab: false },
{ icon: 'leaderboard', text: 'Stats', route: 'www.google.com ', newTab: true },
]
}
},
methods: {
go(link) {
console.log('go run ...')
console.log(link)
console.log(process.env.APP_URL)
if (!link.newTab) {
this.$router.push({ path: link.route })
} else {
window.open(link.route)
}
}
}
}
</script>
src/router/index.js
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
我做错了什么吗?
打开一个新标签似乎可以工作,但它一直在我的本地主机前面添加 URL。
不要将 click
-处理程序与 v-list-item
一起使用,因为这会破坏为路由生成的底层锚标记,并且会影响可访问性。坚持使用内置路由的 v-list-item
道具:
href
:要使用<v-list-item>
创建外部 link,请使用href
属性.内部 links 应该改用to
。target
:要在单击 link 后打开新的 window,请使用target="_blank"
道具
A v-list-item
links 到外部 URL 会像这样使用 href
道具:
<v-list-item href="https://google.com">Google</v-list-item>
打开新标签页的人将使用 target="_blank"
属性:
<v-list-item target="_blank" href="https://google.com">Google</v-list-item>
内部 link 使用 to
属性而不是 href
:
<v-list-item to="/dashboard">Dashboard</v-list-item>
它们也可以用 target="_blank"
在新标签页中打开:
<v-list-item target="_blank" to="/dashboard">Dashboard</v-list-item>
解决方案
在你的例子中,你有一组项目需要有条件地绑定前面提到的道具。最好使用 v-bind
with an object(对象的键值对绑定为组件道具),它是根据每个项目的属性计算的:
- Compute 一个新的 link 数组(名为
computedLinks
),它有一个要绑定的新道具(名为linkProps
):
export default {
computed: {
computedLinks() {
return this.links.map(link => {
const isExternalLink = url => /^((https?:)?\/\/)/.test(url)
const linkProps = {
[isExternalLink(link.route) ? 'href' : 'to']: link.route,
}
if (link.newTab) {
linkProps.target = '_blank'
}
return {
...link,
linkProps,
}
})
},
},
}
- 更新模板以使用
computedLinks
,并将每个 link 的linkProps
绑定到其对应的v-list-item
:
<v-list-item v-for="link in computedLinks" :key="link.text" v-bind="link.linkProps">