Vue 页面跳转

https://www.jianshu.com/p/c699c4d197de  vue 跳转页面并传递参数

https://blog.csdn.net/weixin_40297452/article/details/90704936

 //(id是参数) 加tag 就解析成了可以点击的li
变成了鼠标移入切换
//query 推荐
详情

//params 跳转相同页面数据不刷新
详情

注意:router-link中链接如果是‘/'开始就是从根路由开始,如果开始不带‘/',则从当前路由开始。

const router = new VueRouter({
  mode:'history',//默认是hash模式
  linkActiveClass:'menvscode-active',//导航选中样式
  scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。
    console.log(to) // to:要进入的目标路由对象,到哪里去
    console.log(from) // from:离开的路由对象,哪里来
    console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}
    if(savePosition) {
      return savePosition;
    }else{
      return {x:0,y:0}
    }
  },
  routes:[]
注意: savePosition 这个功能只在 HTML5 history 模式下可用。
$router方式跳转

//推荐query的跳转方式
this.$router.push({
  path: '/detail',
  query: {
    name: 'admin',
    code: 10021
  }
});

跳转地址 ====> /detail?name=admin&code=10021

取值 ====> this.$route.query.name

//params的跳转方式 跳转相同页面数据不刷新bug
this.$router.push({
  name: 'detail',
  params: {
    id: 10021
  }
});

跳转地址 ====> /detail/10021

取值 ====> this.$route.params.id

页面接收参数
created(){
      let uni = this.$route.query.unique;
       this.name =  this.$route.query.id;
  },

注意!!!
传参跳转页面时,query不需要再路由上配参数就能在新的页面获取到参数,
params也可以不用配,但是params不在路由配参数的话,当用户刷新当前页面的时候,参数就会消失。

也就是说使用params不在路由配参数跳转,只有第一次进入页面参数有效,刷新页面参数就会消失。

 

params  传递多个参数

传递多个参数时,params可以配合路由中的name 来使用,也可以和传递一个参数那样 直接在路由路径上拼接多个参数

对应组件使用路由的方法如下:/:id和/:age不能省略,且不能改名字

对应目标组件,获取路由上传过来的参数:

注意:是this.route 而不是 this.router

查询参数(query)

使用查询参数的方式,在路由配置中,path就不用再拼接参数

在父组件中,直接将需要传递的参数放在query里,如下

在子组件中使用this.route.query 接收参数

ps:使用params传递参数,url上只会出现数据,不会出现具体字段

     而使用查询参数query的方式,url上会出现具体的字段,比较不安全

 

你可能感兴趣的:(Vue.js)