vue $router新窗口打开
时间: 2023-07-09 21:27:42 浏览: 53
如果你想要在 Vue.js 中使用 `$router` 打开一个新窗口,你可以使用 `window.open()` 方法,并将路由的完整路径作为参数传递给它。例如:
```
this.$router.push({ path: '/example' }) // 在当前窗口中打开 example 路由
window.open(this.$router.resolve({ path: '/example' }).href, '_blank') // 在新窗口中打开 example 路由
```
此外,你可以添加其他参数来配置新窗口的大小、位置等。例如:
```
window.open(this.$router.resolve({ path: '/example' }).href, '_blank', 'height=600,width=800,left=100,top=100')
```
这将会打开一个高度为 600 像素、宽度为 800 像素、距离屏幕左上角 100 像素、100 像素的新窗口。注意,这可能会被浏览器的弹出窗口拦截器拦截,因此你需要确保你的浏览器允许在新窗口中打开链接。
相关问题
vue router 打开新窗口
Vue Router是Vue.js官方的路由管理器,用于实现单页面应用(SPA)中的路由功能。它可以帮助我们在不同的URL之间进行导航,并且可以实现页面的切换和组件的加载。
要在Vue Router中打开新窗口,可以使用`<router-link>`组件的`target`属性。该属性可以设置为"_blank",表示在新窗口中打开链接。
下面是一个示例代码:
```html
<router-link to="/new-page" target="_blank">打开新窗口</router-link>
```
在上述代码中,当用户点击"打开新窗口"链接时,Vue Router会自动在新窗口中打开名为"/new-page"的页面。
this.$router.push 打开新窗口
this.$router.push是Vue.js中的路由导航方法,用于进行页面跳转。它可以用来打开新窗口,需要在路由配置中进行相应的设置。
要在新窗口中打开页面,可以通过在路由配置中设置target属性为"_blank"来实现。具体步骤如下:
1. 在Vue组件中使用this.$router.push方法进行路由跳转,例如:
```
this.$router.push({ path: '/newPage', target: '_blank' });
```
2. 在路由配置文件(通常是router/index.js)中,对应的路由配置项中添加target属性,例如:
```
{
path: '/newPage',
name: 'NewPage',
component: NewPageComponent,
meta: {
target: '_blank'
}
}
```
3. 在项目的路由配置文件中,添加全局的导航守卫(beforeEach),用于处理目标为"_blank"的路由跳转,例如:
```
router.beforeEach((to, from, next) => {
if (to.meta.target === '_blank') {
window.open(to.fullPath);
next(false);
} else {
next();
}
});
```
这样配置后,当使用this.$router.push方法进行路由跳转时,如果目标路由的meta中设置了target为"_blank",则会在新窗口中打开对应的页面。