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

        

你可能感兴趣的:(vue.js,前端,javascript)