VUE頁面跳轉方式

一、to +跳轉路徑

<router-link to="/">跳轉到主頁</router-link>

　<router-link :to="{path:'/Test',query:{id:1,name:'vue'}}" >跳轉到Test</router-link>

參數獲取：

　　this.$route.query.參數名稱

 

 

 

 

二、函數跳轉

 

1、this.$router.push 跳轉

<button @click="goHome">[跳轉到主頁]</button>


  methods: {

    goHome () {

      this.$router.push({

        name: 'Test1',

        params: {

          hahaha: 'dd'

        }

      })

　　　　} }

參數獲取：

　　　　this.$route.params.參數名稱

 

vue頁面params傳值的必須傳name

2、this.$router.replace跳轉

  使用方法與push 類似

3、this.$router.resolve

　　可配合window.open 進行新開標簽

　　toDeail (e) {
　　　　const new = this.$router.resolve({name: '/detail', params: {id: e}})
　　　　window.open(new.href,'_blank')
　　}

 

三、統計瀏覽器返回

<button @click="goHome">[跳轉到主頁]</button>

后退
  methods: {
    downpage () {
      this.$router.go(-1)
    }
  }

前進

  methods: {
    downpage () {
      this.$router.go(1)
    }
  }

 

 

 參考：https://www.cnblogs.com/fps2tao/p/12049526.html