router-link打开新页面跳转和a标签防止默认跳转及各个属性

第一部分：router-link和a标签返回上一页

两种写法

第一种:可以在任何情况下使用
window.history.go(-1)
第二种:若是安装了vue-router
this.$router.push('/about')

第二部分：a标签防默认跳转（vue写法）

第一种写法：直接给href添加javascript:void(0)
<a href="javascript:void(0);">About</a>

第二种写法
<a href="http://www.baidu.com" @click="fn">About</a>
methods:{ 
  fn(e){
    e.preventDefault()
  }
}

第三种写法（vue）
<a href="http://www.baidu.com" @click.prevent="fn">About</a>

第三部分：router-link打开新页面跳转

第一种：标签式跳转

：标签写法
<router-link target="_blank" to="/">Home</router-link>

第二种：编程式跳转

标签部分
<a href="javascript:void(0);" @click="fn">About</a>

函数部分
 fn(){
  let routeUrl = this.$router.resolve({
      path: "/about",
   })
  window.open(routeUrl.href, '_blank')
 }

第四部分：router-link其他属性

"replace" 属 性
    replace在routre-link标签中添加后，页面切换时不会留下历史记录
    <router-link :to="/index" replace></router-link>
 
"tag" 属 性
    
    具有tag属性的router-link会被渲染成相应的标签
    <router-link :to="/Index" tag="li">Index</router-link>
    <!-- 渲染结果 -->
    <li>Index</li>
    此时页面的li同样会起到a链接跳转的结果，vue会自动为其绑定点击事件，并跳转页