项目场景:
vue单页面项目, 点击a标签在新窗口打开页面问题描述:
点击a标签在新窗口打开artistDetail页面或userIntroduction页面, 但是打开的页面, 却是项目根目录页面, 检查浏览器地址栏, url为'/artistDetail?arId=...#/'或'/userIntroduction?uid=...#/'原代码如下:
<a target="_blank" :href="(item.type == 0) ? ('/artistDetail?arId=' + ar.userId) : ('/userIntroduction?uid=' + ar.userId)">{{ ar.userName }}</a>
原因分析:
虽然使用a标签, url确实变了, 但是vue单页面使用vue-router进行页面跳转, 实际路由路径是'/', 即根路径, 使用vue-devtools查看$route, 路径确实是'/'解决方案:
办法一: 将a标签换成router-link标签, 代码如下:<router-link target="_blank" :to="(item.type == 0) ? ('/artistDetail?arId=' + ar.userId) : ('/userIntroduction?uid=' + ar.userId)">{{ ar.userName }}</router-link>
办法二: 修改a标签的路径 (这里的路由模式是默认的hash模式), 其实就是在路径前面加#, 代码如下:
<a target="_blank" :href="(item.type == 0) ? ('/#/artistDetail?arId=' + ar.userId) : ('/#/userIntroduction?uid=' + ar.userId)">{{ ar.userName }}</a>
更换后, 问题解决, 使用vue-devtools查看$route, 路径也正确了