angular-路由携带多个参数

888 阅读1分钟

第一种,同个路由携带多个参数:

.state('example',{
    url:'/example/:param1/:param2',
    template:'<example></example>'
})

class  ExampleComponent{
    constructor($stateParams){
        console.log($stateParams.param1)//1
        console.log($stateParams.param2)//2
    }
}

<a ui-sref=".example({param1:1,param2:2})"></a>
//页面渲染路径:"example/1/2"

第二种,嵌套路由携带不同参数

.state('example1',{
    url:'/example1/:param1',
    template:'<example1></example1>'
}).state('example1.example2',{
    url:'/example2/:param2',
    template:'<example2></example2>'
})

class  Example1Component{
    constructor($stateParams){
        console.log($stateParams.param1)//1
    }
}
class  Example2Component{
    constructor($stateParams){
        console.log($stateParams.param2)//2
    }
}
<a ui-sref=".example1.example2({param1:1,param2:2})"></a>
//页面渲染路径:"example1/1/example1/2"