vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue路由跳转

Vue路由跳转的5种方式及扩展

作者:前端初见

这篇文章主要给大家介绍了关于Vue路由跳转的5种方式及扩展,在Vue中路由是一种用于导航和管理页面之间跳转的机制,Vue Router是Vue官方提供的路由管理器,需要的朋友可以参考下

路由跳转有两种形式:声明式导航、编程式导航

1. router-link

router-link中链接如果是’ / '开始,就是从根路由开始

如果开始不带 ’ / ',则是从当前路由开始

例子

<template>
  <div>
    router-link 第一种方式
    <router-link :to="{name:'home'}">  
    <router-link :to="{path:'/home'}"> 
    name,path都行, 建议用name 
     <router-link :to"{
              name:'page1',
              query:{key:'我是传递的参数'}
    }">
    传递参数
    </router-link>
  </div>
</template>

2. this.$router.push()

例子

<template>
  <div>
    <vant-button @click='gotoFn1' type="defaullt">
      push第二种方式
    <van-button>
  </div>
</template>
export default{
  name:'page',
  data(){
  },
  methods:{
   gotoFn1(){
      this.$router.push({
        path:'/page',
        query:{key:'我是传递的参数'}
      })
      //push第二种路由跳转方法
    }
  }
}

3. this.$router.replace() (用法同push)

例子

<template>
  <div>
    <vant-button @click='gotoFn2' type="defaullt">
      replace第三种方式
    <van-button>
  </div>
</template>
export default{
  name:'page',
  data(){
  },
  methods:{
   gotoFn1(){
      this.$router.replace({
        path:'/page',
        query:{key:'我是传递的参数'}
      })
      //replace第三种路由跳转方法
    }
  }
}

4. this.$router.go(n)

例子

<template>
  <div>
    <vant-button @click='goBack' type="defaullt">
      第四种方式
    <van-button>
  </div>
</template>
export default{
  name:'page',
  data(){
  },
  methods:{
   goBack(){
      this.$router.go(-1)
       //go第四种路由跳转方法
    }
  }
}

5. location

可以用 window.location来访问

扩展

this.$ router.push()和 this.$ router.replace()的区别

this.$router.push()跳转到指定url路径,并向history栈中添加一个记录,点击后退会返回上一个页面

this.$ router.replace()跳转到指定url路径,但是history栈中不会有记录,所以点击返回按钮时,会直接用【上一个页面之前的那个页面】来替换当前的页面

params和query的区别

query类似 get,跳转之后页面 url后面会拼接参数,类似?id=1。

非重要性的可以这样传,密码之类还是用params,刷新页面id还在。

params类似 post,跳转之后页面 url后面不会拼接参数。

总结:1.query可以用name和path匹配路由,通过this.$route.query.id获取参数,刷新浏览器参数不会丢失

2.params只能用name匹配路由,通过path匹配路由获取不到参数,对应的路由配置path:‘/home/:id’或者path:‘home:id’,否则刷新浏览器参数丢失

3.直接通过url传参,push({path: ‘/home/123’})或者push(’/home/123’),对应的路由配置path:‘/home/:id’,刷新浏览器参数不会丢失。

总结

到此这篇关于Vue路由跳转的5种方式及扩展的文章就介绍到这了,更多相关Vue路由跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文