页面跳转的两种方式

注：不可使用window.location.href 方式跳转，否则beforeRouteLeave等系列导航守卫无效

**注：:href a标签也不可以使用 **

router-link

1，标签跳转

<router-link to='字符串'>点我到第二个页面</router-link>
<router-link :to='变量'>点我到第二个页面</router-link>

<router-link :to="{ name: 'AdsAdd', query: { uid: item.receiveId}}">

this.$router.push({ path:'/two.html' })

2，点击事件跳转**

<button @click="hreftwo" class="test-one">点我到第二个页面</button>

methods:{ //跳转页面
	hreftwo(){
		this.$router.push({ path:'/two.html'  })
	}
}

3，vue 如何点击按钮返回上一页呢

//这是vue挂载的范围html代码
     //<div @click="goOff()">返回</div>
//下面是点击返回的方法
//第一种只返回上一页
   goOff(){
   		this.$router.go(-1);
   },
//第二种 返回上一页，如果没有上一页返回首页
   methods: {
        back(){
            if (window.history.length <= 1) {
                this.$router.push({path:'/'})
                return false
            } else {
                this.$router.go(-1)
            }
        }
    },

因使用href进行跳转，路由不正确的例子

//错误的写法：无法使用导航守卫，不正确的跳转方式
<a
    :href="item.link"
    target="_self"
>
  <div class="home">
    <div class="cart-jb" v-show="item.count">{{item.count}}</div>
    <div class="foot-img"><img :src="index==NavBarTo?item.srcH:item.srcM"></div>
    <span>{{item.text}}</span>
  </div>
</a>

//正确的写法
<router-link :to="item.link">
  <div class="home">
    <div class="cart-jb" v-show="item.count">{{item.count}}</div>
    <div class="foot-img"><img :src="index==NavBarTo?item.srcH:item.srcM"></div>
    <span>{{item.text}}</span>
  </div>
</router-link>