VUE 页面跳转和传参

页面跳转和传参

路由跳转

• 声明式

<router-link to=""></router-link>

• 函数式

this.$router.push({ path:'',query:{} })
this.$router.push({ name:'',params:{} })

• query相当于GET请求，⻚⾯跳转的时候，可以在地址栏看到请求参数
• params相当于POST请求，参数不会在地址栏中显示

路由传参

• 声明式

<router-link :to="{path:'/dem3',query:{id:2}}"></router-link>
<router-link :to="{name:'shop',params:{cityId:4}}"></router-link>

// 接收
$route.query.id
$route.params.cityId

• 函数式
  $ router 和 $ route的区别
  $router : 是路由操作对象，只写对象
  $route : 路由信息对象，只读对象

// 传参
// 通过query传参
this.$router.push({ 
      path:'/search',
      query:{ name:'word' }
 })
 // 通过params传参
 this.$router.push({ 
      name:'hello',
      params:{ age:'11' }
 })

// 接收
this.$route.query.name
this.$route.params.age

路由跳转方式name 、 path 和传参方式params 、query的区别

path 和 name路由跳转⽅式，都可以⽤query传参

• 使⽤path⽅式跳转路由 path会忽略params 所以path不能和params⼀起使⽤
• 推荐使⽤name和query⽅式实现路由跳转

params传参，push⾥⾯只能是 name:‘xxx’,不能是path:‘/xxx’,因为params只能⽤name来引⼊路由，如果这⾥写成了path，接收参数⻚⾯会是undefined！