用了ui-router地址栏没有#, 切换路由后视图也能切换,但是一刷新就Cannot GET

发布于 2022-09-05 14:59:03 字数 1904 浏览 28 评论 0

路由配置如下:

states: [
            {
                name: "app",
                data: {
                    url: '/',
                    views: {
                        'header': {
                            templateUrl: '/views/common/header.html',
                            controller: null
                        },
                        'content': {
                            templateUrl: '/views/common/content.html',
                            controller: null
                        },
                        'footer': {
                            templateUrl: '/views/common/footer.html',
                            controller: null
                        }
                    }
                }
            },
            {
                name: "app.about",
                data: {
                    url: 'about',
                    views: {
                        'content@': {
                            templateUrl: '/views/about.html',
                            controller: null
                        }
                    }
                }
            },
            {
                name: "app.contact",
                data: {
                    url: 'contact',
                    views: {
                        'content@': {
                            templateUrl: '/views/contact.html',
                            controller: null
                        }
                    }
                }
            }
        ]
        

index.html主要如下:

<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>

header.html里是两个路由

 <a ui-sref="app.about">关于我们</a>
 <a ui-sref="app.contact">联系我哈</a>

现在点击app.about 和app.contact都能切换视图, 但是地址栏没有#,一刷新就
Cannot GET

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

天气好吗我好吗 2022-09-12 14:59:03

"Cannot GET" 是因为浏览器不知道你是想设置路由,以为你是在执行请求。

试试配置上:$locationProvider.html5Mode(true);

https://docs.angularjs.org/ap...$locationProvider

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文