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