编程式导航（路由传值）

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

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  //对应的组件模版
        }
    ]
})

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