vue路由导航router-link和router.push()

一，

        to里面的值可以是一个字符串路径，或者一个描述地址的对象

xxx （字符串）

xxx   （对象）

xxx (命名路由）

xxx (直接路由带查询参数query，地址变成 /xxx?color=red）

xxx （命名路由带查询参数query，地址变成/xxxname?color=red)

xxx (直接路由带路由参数params, params不生效，如果提供了path，params会被忽略）

xxx （命名路由带路由参数params，地址栏是/xxx/red

二，router.push()方法

router.push( ' xxx ' ) （字符串）

router.push( { path:  ' xxx' } ) （对象）

router.push( { name: ' xxxname' } ) （命名对象）

router.push( { path: 'xxx' , query: { color: 'red' } } ) （直接路由带查询参数query，地址栏变成/xxx?color=red)

router.push( { name: 'xxxname' , query:{ color: 'red' } } ) （命名路由带查询参数query，地址栏变成/xxx?color=red）

router.push( { path: 'xxx' , params: { color: 'red' } } ) （直接路由带路由参数params，params不生效，如果提供了path，params会被忽略）

router.push( { name: 'xxxname' , params: { color: 'red' } } ) （命名路由带路由参数params，地址栏是/xxx/red）

三，注意

1，关于带参数的路由总结：

        无论是直接路由‘path’还是命名路由‘name’，带查询参数query，地址会变成“/url?查询参数名:          查询参数值”

        直接路由’path' 带路由参数params，params不生效

        命名路由'name'带路由参数params，地址栏保持是"/url/路由参数值"

2，设置路由map里的path值：

        带路由参数params时，路由map里的path应该写为：path：'/xxx/:color';                                

        带查询参数query时，路由map里的path应该写为：path：'/xxx';

3，获取参数方法：

        组件中：{{$route.params.color}}

        js中：this.$route.params.color