Vue页面跳转的几种方式

大家好，欢迎来到IT知识分享网。

1. router-link

  <router-link to="/recommend">    // 路由跳转组件
      <button class="button">页面跳转</button>
 </router-link>

2. this.$router.push

this.$router.push({ 
   path: '/recommend'})
this.$router.push({ 
   path: '/recommend',query:{ 
    id:'2'}})
this.$router.push({ 
   name: '/recommend',params:{ 
    id:'6'}})

路由传参params 和query两种方式的区别：

• query更加类似于我们ajax中get传参，params则类似于post，前者在浏览器地址栏中显示参数，后者则不显示
• query要用path来引入，params要用name来引入，接收参数分别是this.route.query.name和this.route.params.name。

3. window.open(url)

方法里面定义

openUrl () { 
   
	 // 要跳转的url地址
      const url = window.location.protocol + '//' + window.location.host + '/template/left'
      window.open(url)
    }

4. a标签

  <a href="/left"
       title="页面跳转">跳转</a>