VUE 路由嵌套子路由传值

路由是VUE的一大特点，初期开发的时候自己没理解好导致刷新跳转到首页还有路由之间传值复杂化的问题。现在就分享一下我的部分体会。

一、嵌套路由 

路由嵌套应该是基础知识，坑点有：

    1.按照写好的菜单跳转只push 当前组件而不是按照路由文件顺序加载（比如我要加载home.vue 直接push该path 结果不行，在页面重新引入home.vue 发现可以了，就以为自己写好了。其实是错误的方式，只要写的路由文件正确就不会出现加载不出来的情况，可以在path上多做尝试，也可以直接用name跳转）此处出现的问题是刷新跳转到首页，而且组件之间传值特别复杂。

    2.明明路由文件配置的没问题应该跳转的结果每跳，还看不出错误。建议检查router的写法 

1. export default new Router({
2. routes: [ //配置路由，这里是个数组 检查这里不能写成router
3.     { //每一个链接都是一个对象
4.          path: '/', //链接路径
5.          name: 'Hello', //路由名称，
6.          component: Hello //对应的组件模板 检查这里不能写成components

 

     }，

 

二、 路由传值

    1、params传值方式，name+params传值 。路径变量传值 router文件中path后加:id或者加/id  this.$router.push({ path: "/login", params: { id: this.id} });

    2、path+id   router文件中path后加:id或者加/id    this.$router.push({ path: "/login?id=" + this.id });

前两种方法 this.$route.params.id 接收参数

    3、query传值。this.$router.push({ path: "/login", query: { id: this.id } });  this.$route.query.id 获取参数

    4、this.$router.push({ path: "/login/" + this.id });或者 this.$router.push({ name: "login", params: { id : this.id } });  路径中没有传值显示，但刷新数据不能恢复（1、2则能恢复传递的数据）