为什么直接导航到该路线时不匹配?

2024-04-11

郑重声明:这是使用当前相当新的"@angular/router": "3.0.0-alpha.8",路线定义位于帖子底部。

当尝试在我的应用程序中导航时,行为会有所不同,具体取决于我是直接输入 URL 还是通过链接输入:

  • Works:进入http://localhost:9292在地址栏中,正确转发到http://localhost:9292/about
  • Works:直接导航至http://localhost:9292/about通过地址栏
  • Works:如果我导航到http://localhost:9292/about/projects via an <a>标签,在上下文中FrontComponent[routerLink]="['projects']"属性,路由工作得很好。
  • Broken:直接导航至http://localhost:9292/about/projects导致以下错误消息(缩短的堆栈跟踪):

    Unhandled Promise rejection: Cannot match any routes: 'projects' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: 'projects'
    Stack trace:
    applyRedirects/<@http://localhost:9292/node_modules/@angular/router/apply_redirects.js:29:34
    Observable.prototype.subscribe@http://localhost:9292/node_modules/rxjs/Observable.js:52:57
    

我在这里可能做错了什么?有没有办法查看错误消息中已拒绝的所有路由?

Edit因为现在已经多次建议了:我不怀疑这是服务器端问题。之前的路由通过router-deprecated工作正常并且HTML从失败的路线提供的服务看起来很好。但为了以防万一,这是相关的服务器端路由代码(ruby with sinatra):

# By now I have too often mistakenly attempted to load other assets than
# HTML files from "user facing" URLs, mostly due to paths that should have
# been absolute but weren't. This route attempts to catch all these
# mistakes rather early, so that the show up as a nice 404 error in the
# browsers debugging tools
get /^\/(about|editor)\/.*\.(css|js)/ do
  halt 404, "There are no assets in `editor` or `about` routes"
end

# Matching the meaningful routes the client knows. This enables navigation
# even if the user submits a "deep link" to somewhere inside the
# application.
index_path = File.expand_path('index.html', settings.public_folder)
get '/', '/about/?*', '/editor/*' do
  send_file index_path
end

# Catchall for everything that goes wrong
get '/*' do
  halt 404, "Not found"
end

我不怀疑这是由于错误的路由定义(路由确实通过链接工作),但为了完整起见,这些是路由:

前面/front.routes.ts:

export const FrontRoutes : RouterConfig = [
    {
        path: '',
        redirectTo: '/about',
        terminal: true
    },
    {
        path : 'about',
        component: FrontComponent,
        children : [
            { path: 'projects', component: ProjectListComponent},
            { path: '',         component: AboutComponent},
        ]
    }
]

编辑器/editor.routes.ts:

export const EditorRoutes : RouterConfig = [
    {
        path: "editor/:projectId",
        component : EditorComponent,
        children : [
            { path: '', redirectTo: 'settings', terminal: true},
            { path: 'settings', component : SettingsComponent },
            { path: 'schema', component : SchemaComponent },
            { path: 'query/create', component : QueryCreateComponent },
            { path: 'query/:queryId', component : QueryEditorComponent },
            { path: 'page/:pageId', component : PageEditorComponent },
        ]
    }
]

应用程序.routes.ts:

import {EditorRoutes}                   from './editor/editor.routes'
import {FrontRoutes}                    from './front/front.routes'

export const routes : RouterConfig = [
    ...FrontRoutes,
    ...EditorRoutes,
]

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
]

Set "/"作为价值base的标签index.html使路由器正确解析子路径。这是与官方文档不符 https://angular.io/docs/ts/latest/guide/router.html#!#base-href但似乎有效。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么直接导航到该路线时不匹配? 的相关文章

随机推荐