VUE子路由和传参数的问题？

Question

routes:[{path:"/conA/:color/abc/:type",}, 传参数的时候，我用VUE-LINK点击跳转对吧，

<router-link :to="{path:'conA'}">打开conA</router-link><br />

<router-link :to="{path:'conB'}">打开conB</router-link><br />

conA我点击的路径是http://xxx.8080/conA/uuueeu            路径+参数，

conB我没有设置传参数，这两页面来回切换的时候，吧，URL地址里就回不去了。

变成http://localhost:8181/conA/conA  这样了，跳不回去了。

---------------------

子路由也遇到同样的问题了。我的QQ是930944122    有没有大神能帮帮忙阿

Answer 1

fishenal 2017-06-19 12:01:45

你写的我看不懂，routes:[{path:"/conA/:color/abc/:type",}

这个意思是，该路径接受两个参数，color和type，替换在路径的这个位置，而且是必须有的，假如color没有，abc就不会往下执行，顺序会乱掉。

<router-link :to="{path:'conA'}">这是跳转到路径conA，并没有传参数，传参数的写法是

<router-link :to="{path:'conA',params: { color: 123, type: 'abc' }}">

• 提问者 狼灰灰 #1

  恩，你说的跟老师讲的一样一样的。我遇到的问题是这样子的，假如conA带参数访问，而且是必须带参数，才能正确加载A的页面，对吧。
  这个时候，我conB不带参数，直接访问，也没有问题，问题 就是A和B来回点击切换的时候，URL上的地址会变成http://xxx:8080/conA/red/abc/string/conA/conA/conA/conA会一直重复。
  这个情况你有没有遇到过阿。我不知道咋回事了，代码是按视频上写的，就是main.js的A的映射后面是path: "/conA/:color/abc/:type"，  B是path: "/conB
    。百度也找不到相关的解释。

• 提问者 狼灰灰 #2

  非常感谢！

• 提问者 狼灰灰 #3

  模拟给你看看
  routes: [ 
  		{
  			path: "/conA/:color",
  			component: require('./components/conA.vue') 
  		},
  		{
  			path: "/conB",
  			component: require('./components/conB.vue')
  		}
  ]
  这个是按视频教程写的，A的传参写在后面，访问的时候也是必须要写成：
  http://localhost:8080/conA/abc  对吧。abc就是参数
  
  然后，B没有要参数，直接访问http://localhost:8080/conB/肯定就是能加载B里的内容，这以上都是对的吧。
  
  问题来了，当我输入http://localhost:8080/ 我没有设置默认路由，肯定都是空的。只显示两个A标签  打开conA    打开conB   对吧，点击的时候才会去加载不同组件内的内容。
  但是点击的时候地址只是这样变：
  http://localhost:8080/conA/conA
  http://localhost:8080/conA/conB
  变成这样了，什么也不出来了。
  
  <router-link :to="{path:'conA'}">打开conA</router-link>
  <router-link :to="{path:'conB'}">打开conB</router-link>

点开查看后面2条评论