路由间传值:有这种方法,一种是显示在地址导航栏里,一种是不显示地址导航里

1.params形式 :参数不显示在地址栏 

(1)在app.vue中写入方法,点击按钮跳转到HelloWord的页面

data(){
    num:2
}

methods:{
      goback(){
        this.$router.go(-1)
      },
      goHome(){
//        this.$router.push('/');
        //这种形式参数不显示在地址栏
        this.$router.push({name:'HelloWorld',params:{userId:this.num}})

        //这种形式显示在地址栏
        //this.$router.push({path:'/',query:{userId:this.num,name:'judy'}})
      },
      hi2(){
        this.$router.push('/hi2'); //跳转到hi2
      }
    }

 (2)上面的在HelloWorld.vue中获取参数值{{$route.params.userId}}

<h4>第一种方式:获取的参数:{{$route.params.userId}}</h4>

2.query形式:参数显示在地址栏

(1)写入js

//这种形式显示在地址栏
this.$router.push({path:'/',query:{userId:this.num,name:'judy'}})

(2)在html中获取

<h4>您获取的参数:{{$route.query.userId}}</h4>

每日小知识点:

vue-router项目启动,把url中的#好去掉

在router/index.js中写入 mode:'history';

export default new Router({
    mode:'history', //项目启动把url带的#号去掉
    router:[
        {        //每一个链接都是一个对象
          path: '/', //链接路径
          name: 'HelloWorld',  //路由名称
          component: HelloWorld  //对应的组件模版
        }
    ]
})

作为一个程序员,最郁闷的事情是,面对一个代码块,却不敢去修改。更糟糕的是,这个代码块还是自己写的。

Logo

前往低代码交流专区

更多推荐