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

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

    • 1. 声明式router-link
    • 2. 编程式this.$router.push
    • 3. 编程式this.$router.replace
    • 4. this.$router.go()

官网地址: Vue Router

学习官网后做个笔记;

1. 声明式router-link

    
    
    
    

    

    

    

      
      

    
    

    
    
    

注意: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.$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,Vue,Router)