a标签的target属性
_self :默认。在相同的框架中打开被链接文档。
_blank: 新开一个窗口打开文档
_parent : 在父框架集中打开被链接文档。
_top:在整个窗口中打开被链接文档。
问题背景
// a标签 react-router-dom 或者 umi 中使用
<Link target = "_blank" to={'/home'}></Link> // 添加target = "_blank" 后,该链接会重新打开一个窗口
本地link跳转/home页面是ok的,但是部署后发现nginx报错跳404页面
我们在用nginx部署时候完项目会出现页面刷新会404,而页面上点击跳转(一般比如点击菜单)页面则不会404,为什么呢,因为你没在nginx配置上面加上重定向跳转,为什么要重定向?因为我们打包出来的dist文件不包含我们要跳转的那个页面的静态文件例如home.html
。
这句配置的意思是每次匹配url路径时候找不到对应静态资源时候调制跳转到index.html文件(为什么要跳转到index.html?看看下面的解释把)
先说解决办法
在nginx中配置这么一项正则匹配
server {
...
location / {
root html;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
...
}
原因,解析为什么会这样(针对路由在history模式下)
下面内容需要稍微知道router路由工作原理、nginx原理
现在来解决问题:
1、假设现在在浏览器上的url为 10.1.2.3:8080/home,此时刷新页面时候会去根据浏览器上的url去服务器(nginx)上面请求对应的静态资源,nginx根据location / 的匹配规则在dist文件夹里没有找到对应的静态文件"home",所以返回404,合理。
此时通过配置try_files来重定向返回index.html文件,也就是回去首页“ / ”,注意,此时你的页面已经刷新过了,此时react-router或者vue-router路由发挥作用,会根据当前的url地址来对应匹配上组件,所以此时url即对应组件,页面重新加载完成,完事。
2、第二个问题,为什么点击跳转时候会刷新页面而有时候不会刷新页面,要知道跳转有两种情况:一种页面刷新(属于第一个问题),一种页面不刷新。这取决于你代码的书写情况,请记住:
(1)push不会刷新页面,只会更改浏览器上的url路由变更,不管是react-router还是vue-router都是运用html的api实现,叫做
pushState()
(2)通过<Link to='/test'> </Link>
会刷新页面,它相当于a标签
所以当你点击跳转时候,有时候你代码用的是push(不刷新)、有时候用的是a标签或者Link(刷新),才导致这个问题。