a标签和link的区别

本文已参与「新人创作礼」活动，一起开启掘金创作之路

a标签和link区别

a标签是跳转一个新的页面，有请求刷新动作
link是vue,react自带的组件，封装好的，无请求和刷新动作
就是我们常说的单页面应用

结论

需要跳新的页面用a标签，或原生js
不需要新页面，用link组件，无刷新，用户体验和性能都好

实践案例

window.location.href="http://www.baidu.com" 

window.open("http://www.baidu.com")

window.history.back(-1);

self.location.href="baidu.com"

react通用封装

   //最主要的就是过滤，分开link是不是跳新的页面
      const Link = (props) => {
        const {
          href = "",
          color = "inherit",
          className,
          refresh,
          onClick,
          propsRef,
          style,
          ...otherProps
        } = props;

        //过滤js
        if (href === "" || href === "none" || /^javascript:/.exec(href)) {
          <a
            className={className}
            style={{ ...style }}
            {...otherProps}
            ref={(el) => (propsRef = el)}
            onClick={(e) => {
              e.preventDefault();
              onClick?.(e);
            }}
          />;
        }

        // 以/开头就是当前页面跳转
        if (/^\/[^/]/.exec(href) && !refresh) {
          return (
            <Link
              {...otherProps}
              to={href}
              ref={(el) => (propsRef = el)}
              onClick={onClick}
              className={className}
            />
          );
        }

        //最后一种就是普通a 标签+ href
        return (
          <a
            {...otherProps}
            href={href}
            ref={(el) => (propsRef = el)}
            className={className}
          />
        );
      };