从 URL ui-sref (ui.router) 隐藏参数

Question

我的 HTML 如下：

<a ui-sref="videoParent.Display.video({videoName:'[[sVid.slug]]', videoId:'[[sVid.videoID]]'})"><p>[[sVid.name]]</p></a>

然后我在我的 js 文件中检索参数 videoName 和 videoId，如下所示

.state("videoParent.Display.video", { 
            url: "/video/:videoName/:videoId", 
            views: {
                'video_info@videoParent': { 
                    templateUrl: "/partials/starred_video.html", 
                    controller: "starredVideoController",
                    controllerAs: "starredVidsCtrl",
                    resolve: {
                        retrivedVideo: ['videosService', '$stateParams', function(videosService, $stateParams) {
                            if ($stateParams.videoId) {                                   
                                var video = videosService.getVideoById($stateParams.videoId);
                                return video;
                            }
                        }]
                    }
                },

在我的网址中，我得到这样的结果：

../video/data-statistician/5

但是，我不希望显示 videoId (5)，而是希望我的输出为：

../video/data-statistician

我可以通过将状态的 url 部分编写为：

网址：“/video/:videoName

但问题是，如果我像上面那样编写代码，videoId 将不会包含在 $stateparams 对象中。

如何将视频 ID 传递给状态而不显示在 URL 中？

Answer 1

如果你不想在 URL 中显示 ID，但需要使用 stateparams 传递 ID，试试这个

.state("videoParent.Display.video", { 
            url: "/video/:videoName",
           params:{videoId:null}, 
            views: {
            'video_info@videoParent': { 
                templateUrl: "/partials/starred_video.html", 
                controller: "starredVideoController",
                controllerAs: "starredVidsCtrl",
                resolve: {
                    retrivedVideo: ['videosService', '$stateParams', function(videosService, $stateParams) {
                        if ($stateParams.videoId) {                                   
                            var video = videosService.getVideoById($stateParams.videoId);
                            return video;
                        }
                    }]
                }
                }

注意：状态定义中的 params 声明已更改为 params: { id: {} } from params: ['id']

<a ui-sref="videoParent.Display.video({videoName:{sVid.slug}, videoId:{sVid.videoID}})"><p>[[sVid.name]]</p></a>

UI-路由器版本：~v.0.2.10

Answer 2

正如您所建议的，您可以通过将 url 设置为来传递参数而不让它们显示在 URL 中

url: "/video/:videoName

您可以通过指定添加其他参数（不在 URL 中）：

    params: {
        videoId: null
    }

如果您想导航到状态并传递参数，您可以执行以下任一操作：

在 HTML 中：

<a ui-sref="videoParent.Display.video({videoName: 'Rambo', videoId: 5})">Go to video</a>

在 Javascript 中：

$state.go('videoParent.Display.video', {videoName: 'Rambo, videoId: 5});