Vue Router路由的跳转及参数传递

官网地址: Vue Router

学习官网后做个笔记;

1. 声明式router-link

    
    
    
    
<!-- 2.带参数 可以使用params 或 query可以传递参数 -->

<router-link :to="{name:'home', params:{id:1}}"></router-link>

<!-- params传参数 (类似post)
  路由配置 path: "/home/:id" 或者 path: "/home:id" 
  不配置path ,第一次可请求,刷新页面id会消失
  配置path,刷新页面id会保留-->

  <!-- html   取值 :  {{ $route.params.id}} -->
  <!-- script 取值 :  this.$route.params.id -->

<router-link :to="{ path:'home', query: { id: 1}}"></router-link>
<!-- 结果为/home?id=1 -->

<!-- html   取值 :  {{ $route.query.id}} -->
<!-- script 取值 :   this.$route.query.id -->

注意:params和query的区别:

  1. query 传参配置的是path,而params传参配置的是name,在params中配置path无效
  2. query在路由配置不需要设置参数,而params必须设置
  3. query传递的参数会显示在地址栏中
  4. params传参刷新会无效,但是query会保存传递过来的值,刷新不变

路由配置

  1. params写法:
 {
path: '/home/:id/:1',
name: Home,
component: Home
}

 
 
   
   
   
   
`如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者				刷新页面的时候参数会丢失,那依赖这个参数的http请求或者其他操作就会失败。`

 
 
   
   
   
   
  1. query写法:
 {
path: '/home',
name: Home,
component: Home
}

 
 
   
   
   
   

总结:

  1. params、query不设置也可以传参,但是params不设置的时候,刷新页面或者返回参数会丢失,query并不会出现这种情况;
  2. params传参时 参数不会出现在url的路径上面, 但是刷新页面时param里面的数据会消失;
  3. query传参时 参数出现在url的路径上面, 刷新页面时query里面的数据不变;

故,params常用于密码之类的传参,不会显示在地址上,有利于保护隐私;

2. 编程式this.$router.push

this.$router.push在函数中调用;

// 1.不带参数
this.$router.push('/home')
this.$router.push({ name: 'home'})
this.$router.push({ path:'/home'})

// 2.query传参
this. r o u t e r . p u s h ( n a m e : ′ h o m e ′ , q u e r y : i d : ′ 1 ′ ) t h i s . router.push({ name:'home',query: {id:'1'}}) this. router.push(name:home,query:id:1)this.router.push({ path:’/home’,query: {id:‘1’}})

// 3.params传参
this.$router.push({name:‘home’,params:{id:‘1’}})

// 注意,如果提供了path, params参数会被忽略,需手动在路由中配置带有完整参数的path
this.$router.push({path:’/home’,params:{id:’’}}) // 结果为/home

3. 编程式this.$router.replace

用法与this.$router.push的相同,但不同的是:它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录

补充:若使用声明式,则在router-link中添加replace



 
 
   
   
   
   

4. this.$router.go()

这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。


this.$router.go(n)
 // 向前或者向后跳转n个页面,n可为正整数或负整数

 
 
   
   
   
   

总结:

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

  2. this.$router.replace
    跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面);

  3. this.$router.go(n)
    向前或者向后跳转n个页面,n可为正整数或负整数;

  4. 获取参数:
    html 取值 : {{ $route.params.id}}{{ $route.query.id}}

    script 取值 : this.$route.params.idthis.$route.params.id

  5. router与route的区别
    this.$route 是路由【参数对象】,所有路由中的参数, params, query 都属于它;

    this.$router是一个路由【导航对象】,用它 可以方便的 使用 JS 代码,实现路由的 前进、后退、 跳转到新的 URL 地址

你可能感兴趣的:(Vue Router路由的跳转及参数传递)