頁面跳轉的幾種方式

一：js的跳轉

1.直接跳轉：window.location.href

<script language="javascript" type="text/javascript">

     window.location.href="login.jsp?backurl="+window.location.href; 

     //或者

    window.location.href='http://www.baidu.com';

</script>

 

2.回到上一層頁面   window.history.back(-1)

<script language= "javascript" >

     //標簽嵌套：

     <a href= "javascript:history.go(-1)" >返回上一步</a>

</script>

 

二：vue跳轉

1.在template中的常見寫法：

<router-link to="/miniCard/statement/horizon">
     <button class="btn btn-default">點擊跳轉</button>
</router-link>

2.this.$router.go()

　　this.$router.go(1)  //在瀏覽器記錄中前進一步

      this.$router.go(-1) //后退一步記錄

　　this.$router.go(3) //前進三步記錄

3.this.$router.push()

　　A：this.$router.push({ path: '/home', query: { site: '1111'} }) 

　　　　query傳參，用path屬性對應跳轉路徑，類似於get提交，參數是在路徑里顯示的。

　　　　子頁面接收時 var cityId = this.$route.query.cityId

　　B：this.$router.push({ name: 'Home', params: { site: '2222'} })

　　　　params傳參，用name屬性對應跳轉路徑，類似於post提交，參數不會出現在跳轉路徑里。

　　　　子頁面接收時 var cityId = this.$route.params.cityId

　　兩個同級頁面，用query傳參。A通過路由帶參跳轉到B頁面，然后通過參數過濾掉B頁面的一些數據。之后刷新B頁面，由於參數是在路徑里的，還是過濾掉的數據，這個時候要么在B頁面入口進 入B頁面，要么就得在頁面再做處理才能符合需求，改用params之后就沒這個問題了。

4. this.$router.replace() 用法同上

　打開新的頁面，不會像history添加新紀錄，而是直接替換掉當前記錄。點擊返回，會跳轉到上上一個頁面。上一個記錄是不存在的。