在angular中可以使用两条路线吗？
在Angular中，确实可以使用多条路线（Routes）。Angular的路由模块允许你定义应用程序的导航结构，将URL映射到不同的组件，从而实现单页应用（SPA）的功能。
基础概念
Angular的路由系统基于以下几个核心概念：
- Router：负责处理导航和URL的变化。
- Route：定义了URL路径与组件的映射关系。
- ActivatedRoute：提供了访问当前激活路由信息的接口。
类型
Angular的路由可以分为以下几种类型：
- 懒加载路由：当用户导航到该路由时，才加载对应的模块和组件，有助于提高应用的初始加载速度。
- 预加载策略：在后台预先加载某些路由的模块，以减少后续导航的延迟。
- 路由守卫：用于控制用户访问权限，如
CanActivate、CanDeactivate等。
应用场景
多条路线在Angular中的应用非常广泛，例如：
- 多级导航：如网站的主页、产品列表、产品详情等不同层级的页面。
- 权限控制：根据用户的角色或权限，显示不同的页面或功能。
- 动态内容：根据URL参数或查询字符串，展示不同的内容。
示例代码
以下是一个简单的Angular路由配置示例：
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }遇到的问题及解决方法
问题：路由配置错误导致页面无法显示
原因：可能是路径拼写错误、组件未正确导入或路由配置顺序不当。
解决方法：
- 检查路径是否拼写正确。
- 确保组件已正确导入。
- 路由配置顺序很重要，确保父路由在子路由之前。
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
// 确保父路由在子路由之前
{ path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }
];问题：懒加载模块加载失败
原因：可能是模块路径错误、网络问题或服务器配置不当。
解决方法：
- 确保模块路径正确。
- 检查网络连接和服务器状态。
- 确保服务器支持动态导入（如使用
express时需配置express.static）。
const routes: Routes = [
{ path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }
];参考链接
通过以上内容，你应该对Angular中的多条路线有了更深入的了解，并能解决一些常见问题。
相关·内容
我有两条路线
{ path: '', component: DefaultComponent },
{ path: 'second', component: SecondComponent }
和html格式
<a [routerLink]="['/']" [routerLinkActive]="['active']">default</a>
<a [routerLink]="['/second']" [routerLinkActive]
浏览 1提问于2016-12-24得票数 0
我创建了一个新的Angular 10应用程序，并创建了两条路线。然而，似乎Angular将每个请求都匹配到了第一个路由，我不知道为什么。如果我只创建了一个'/login‘路由并试图在我的浏览器中访问它，那么Angular也不会获得它。看起来Angular不能正确映射路由器？
这是我的app.module.ts文件
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initialize
浏览 0提问于2020-07-05得票数 0
1回答
在角2中调用组件刷新
、、、
我正在尝试实现一个基于用户是否登录的显示不同链接的导航栏。
我正在使用angular2-jwt库，它提供了tokenNotExpired()函数。
我有两条路线，/home和/login。我有一个navbar组件，它位于<router-outlet>之外，这意味着它只初始化一次，而不是每次路由更改时都初始化。
成功登录后，我将调用router.navigate(['/home])。主页和登录都会检查用户是否登录到各自的ngOnInit()函数中。因此，主组件能够检测登录用户。
但是，我无法更新导航栏，因为它没有被告知登录。
有谁能告诉我实现此变更检测的正确方法吗？
谢谢。
浏览 3提问于2016-10-24得票数 2
回答已采纳
在我的角cli应用程序中，我使用angular 4进行登录身份验证。在Azure中部署时，当路由从主页开始时，应用程序可以正常工作，从登录流开始。但是在任何其他路径上刷新页面都会产生404错误。
错误:您正在寻找的资源已被删除，其名称已更改，或暂时不可用。
发现Hashlocationstrategy解决了这个问题，所以我将它添加到我的AppModule中
这使我的应用程序在本地主机在登录阶段循环。这个应用程序永远不会到达主页。
这个应用程序一直在循环这两条路线。这个问题有什么可以解决的吗？
浏览 7提问于2017-09-18得票数 0
回答已采纳
我正在寻找一个使用Microsoft Graph API的JavaScript示例。虽然我已经找到了；但我不能让它工作。我需要成为AAD管理员才能正确注册吗？我只是我的组织的Office365租户的常规用户。
我已经在上使用过向导。我都是通过1)当前的注册工具和2)新的注册门户来注册应用程序的。这两条路线都为我提供了一个独特的clientId。当我尝试通过clientId 1运行Angular示例时，我得到以下错误：
AADSTS90093: Calling principal cannot consent due to lack of permissions.
通过clientId 2，我得
浏览 2提问于2015-11-22得票数 0
1回答
我有两条路线：
home‘about’关于
当我直接用浏览器访问/about时，我注意到了两件事：
我的主模块是预加载的(而我请求了/about )该URL被重写如下:/about -> / -> /about
app-routing.module.t
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', loadC
浏览 3提问于2021-11-24得票数 0
我的反应网站基本上由两条路线组成。主页，然后是联系页面。我使用的反应-路由器-多姆切换之间的两条路线。如果我在联系人页面上，如何使导航栏显示“关闭”而不是联系人。
浏览 2提问于2022-01-11得票数 -1
回答已采纳
我有一个屏幕，有两条路线指向它。这两条路线都在一个BottomTabNavigator中。我的问题是目标屏幕被呈现了两次。为每个路由提供不同的呈现。
<Tab.Screen name="Home" component={ HomeScreen } options={{ title: 'Home' }} />
<Tab.Screen name="NewProduct" component={ HomeScreen } options={{ title: 'Neues', lazy:false }} />
没有
浏览 2提问于2022-06-17得票数 0
回答已采纳
可以有两条路线的区域吗？例如：
[RouteArea("{culture}/testarea")] <-- specific culture
[RouteArea("testarea")] <-- default culture
LocalizableAreaBaseController ....
谢谢!
浏览 1提问于2013-09-11得票数 1
嗨，我有个路由器问题.
我定义了这两条路线：
<Route path="/*" component={() => (<Error/>)}/>
<Route exact path="/" component={() => (<Logins foo={"test"} loginHandler={this.props.loginHandler}/>)}/>
两条路线都显示..。
只有在没有其他匹配的情况下，才应该显示*
浏览 3提问于2017-08-03得票数 1
回答已采纳
我定义了这两条路线：
<Route name='register' handler={Register} >
<Route name='registerpromotion' path='/registerpromotion/:promotionCode' handler={Register}/>
</Route>
因此，这两条路由都使用相同的处理程序，名为寄存器。
在registerpromotion路由的情况下，我传递一个属性，而对于寄存器路由，则不传递。
我无法让它工作- promotionCode
浏览 0提问于2014-10-14得票数 5
通过这两条路线中的任何一条都可以做到吗？
因为我找不到任何教程或示例来说明如何做到这一点。
浏览 0提问于2013-05-19得票数 1
回答已采纳
我是一个公共交通android应用程序的开发人员，我为每条公交线路都有一个KML文件。我可以简单地将一个孔KML文件作为文本存储在SQLite数据库中吗？有更好的方法吗？
每个KML有一条公交线路的两条路线。大约有380条公交线路。
浏览 3提问于2015-06-08得票数 0
2回答
我有我的应用程序，我正在使用react- routes，在我渲染的每条路线上，我都渲染了导航栏，在导航栏中，我只想渲染两条路线上的输入域。我该怎么做呢？当路由匹配时，有什么"If“可以用来渲染组件的一部分吗？
浏览 15提问于2019-06-04得票数 0
回答已采纳
1回答
如何检查两条gps线路是否相等？
、、、、
想象一下有个人在同一条街上跑了两次。但是，由于GPS并不是100%的精确性，这两条路线是不同的。您可以更好地理解下面的图片：
Red Line - First time run
Blue Line - Second time run
Black Line - Street
Dots - GPS coordinates (latitude and longitude)
我想要做的是确认这两条路线是一样的。有人知道吗？
浏览 3提问于2014-09-04得票数 1
回答已采纳
从SEO的角度来看，以下两条路线会有一些不同吗？或者，机器人是否足够聪明，能够爬行和索引这两条路线，作为其他视图中的登陆主页？
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index');
});
或
/* GET home page. */
router.get('/index', function(req, res, next) {
res.render('index');
});
那么为了搜索引擎优化的
浏览 1提问于2018-10-24得票数 0
4回答
我有一个简单的angular7应用程序，只有两条路线，主要是“文章”。如果您在本地测试它，它就会工作，但是当您打开github页面时，它只会加载页面的css。我部署在的角度文档之后，我也尝试使用gh页面工具。但他们都没用。如果我把我的路线移开它就能工作了。
这就是我在控制台上遇到的错误。
1 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'blogfolio'
Error: Cannot match any routes. URL Segment: 'bl
浏览 0提问于2018-12-04得票数 2
回答已采纳
这两条路线之间的实际差别是什么？
&
这两条路线是一样的？
//Route 1.
routes.MapRoute("SampleRounteOne" , "{controller}/{action}/{id}" , new {id = UrlParamter.Optional})
//Route 2.
routes.MapRoute("SampleRounteTwo" , "{controller}/{action}/{id}" , new {id = ""})
浏览 0提问于2018-12-15得票数 0
回答已采纳
1回答
有两条路线：
Route::get('/{article:slug}', [ArticleController::class, 'showArticlePage']);
和
Route::get('/{user:nickname}', [ProfileInfoController::class, 'getUserByNickname']);
每个路由都有执行其功能的方法吗?您不能更改uri
例如：
domain.com/nickname =>我要让用户在“用户”表中搜索
2.Domain.com/my-first- =>
浏览 2提问于2022-11-21得票数 0
回答已采纳
我的理解是，路线是基于“先赢”的原则，所以最具体的路线应该放在路线阵列的开头，最一般的路线应该放在最后。
但是，在下面的代码中，对我来说工作得很好，不是最一般的路由放在开始，然后接下来的两条路线有更一般的第一条和更具体的第二条？
为什么第一条路由不总是匹配每条路由(这意味着其他路由永远不会匹配)？我认为空路径(path: '')匹配一切，因为所有路径都以''开头和结尾，但我对此的理解是错误的吗？
类似地，即使我们确实通过了path:''，为什么'search/'不总是触发，不允许'search/:query'
浏览 1提问于2019-03-07得票数 0
我有下面的反应js代码
const routing = (
<Router>
<div>
<Route path="/posts" component={Posts} />
<Route path="/posts/new" component={New} />
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById(&
浏览 0提问于2020-01-29得票数 0
回答已采纳
我在R中使用devtools::install_github...来安装存储库，并在终端中使用git clone安装存储库。这两条路线有什么区别？到目前为止，我知道我可以在R中使用library(package)并将包加载进来，而当我克隆了GitHub存储库时，我不认为这个包是立即可用的。有人能解释这两种方法的区别吗？
谢谢!
浏览 1提问于2021-11-24得票数 0
回答已采纳
1回答
Laravel路线误差
、、、
我有两条路线：
Route::resource('tournament/{tourId}/phase/{phaseId}/bets', 'PhaseController@getPhaseBets');
Route::resource('tournament/{tourId}/phase/{phaseId}', 'PhaseController@getPhaseInfo');
但是，在尝试运行任何GET api时，我会得到这个异常：
Route pattern "/api/tournament/{tourId}/phase/
浏览 0提问于2014-06-24得票数 0
回答已采纳
1回答
我有一个导航到两条路线的角度应用程序：
http://localhost:8080/ /* Landing page */
http://localhost:8080/details/:id /* Result page */
例如，每当我导航到http://localhost:8080/details/4235时。我遇到了错误:无法获得/详细信息/4235
下面是我如何设置我的路线，在我的：
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes
浏览 0提问于2017-07-11得票数 0
回答已采纳
使用Google maps api可以同时绘制两条路线吗？例如
Route from city A to B
and Route from city C to D
在这种情况下，A、B和C、D是分开的。
谢谢。
浏览 0提问于2012-03-15得票数 0
我使用的是角度路由器，我有一条类似于下面的路由
angular.module("manageAbcApp", ["myApp", "ngRoute"])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: '/Scripts/app/views/abc/
浏览 3提问于2014-10-09得票数 2
回答已采纳
我正在将我的应用程序升级到RC5，并遇到了一些困难。
在我的app.routing.ts中，我有：
import { Routes, RouterModule } from '@angular/router';
export const appRoutes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', loadChildren: './app/home/home.module#Home
浏览 1提问于2016-08-15得票数 0
回答已采纳
3回答
在拉拉维尔4，让我们说，我有这两条路线。第一条路径在数据库中查找一个段塞，如果找不到段塞，就转到另一条路径。这有可能吗?我该怎么做呢？
Route::get('{slug}', 'SlugController@getBySlug');
Route::get('/about', 'AboutController@index');
浏览 1提问于2014-10-20得票数 1
回答已采纳
我正在尝试设置Angular和身份服务器。这个应用程序真的有两条路线。项目列表和项目详细信息。 这两个页面都需要保护。现在，它在某种程度上起作用了。当我转到http://localhost:4200时，它将显示带有标题但没有项目数据的项目列表页面。大约一两秒钟后，它将重定向到Identity server登录页面。 我不希望它显示与标题的项目列表页面，我希望它直接到登录页面。 const routes: Routes = [
{
path: "project-list",
component: ProjectlistComponent,
canAc
浏览 16提问于2019-10-11得票数 0
回答已采纳
我一直在用这个砸我的头。我有两条路线：
1号干线
起点：
lat: 44.426767
液化天然气: 26.102538
终点：
lat: 45.031428
液化天然气: 23.268939
2号干线
起点：
lat: 45.095770
液化天然气: 24.362799
终点：
lat: 44.857492
液化天然气: 24.881478
现在，我知道这两条路线是相互对立的(如果我在地图上画它们)，但我不太清楚如何从数学上分辨这一点。我试过研究数学向量，但我不知道如何用纬度和经度坐标来表示向量。
如果你能给我
浏览 0提问于2019-03-21得票数 0
回答已采纳
1回答
考虑到这种情况，我有以下两条路线：
Route::post('cart/update', ['uses' => 'CartController@update', 'as' => 'cart.update']);
Route::match(['get', 'post'], 'order/checkout', ['uses' => 'OrderController@checkout', 'as' =>
浏览 1提问于2015-03-28得票数 1
回答已采纳
7回答
我有一个Next.js博客，只有两条路线：/和/posts/:slug。
当我在/posts/my-post-title上，我点击反向链接(到/)，一切都好。页面加载速度快(不刷新)。
当我在/上，我点击/posts/my-post-title，页面刷新，我不知道为什么。有什么建议吗？
链接：，
浏览 0提问于2019-06-29得票数 9
回答已采纳
假设我有两条路线：/dashboard和/profile。现在我第一次访问/dashboard，获取数据并显示在页面上。然后，我再次进入/profile页面，获取并显示数据。现在，当我回到/dashboard页面时，我不想再次获取数据。我如何在反应中实现这一点？任何帮助都会很好。
浏览 7提问于2022-01-29得票数 0
回答已采纳
1回答
属性与常规路由
、、、、
Q1:所以这个说属性路由比传统的路由更适合于api版本控制。我不清楚这种说法背后的原因，因为对我来说，为了支持这些理由：
/api/v1/products
/api/v2/products
您需要做的就是定义两条路线：
routes.MapHttpRoute("V1", "api/v1/products", new {controller = "V1Controller", action = "ListProducts"});
routes.MapHttpRoute("V2", "api/v2/pro
浏览 1提问于2016-07-05得票数 3
回答已采纳
2回答
快速路由器匹配参数
、、、
假设我有两条路线，一条有平行线，一条没有：
/foo?bar/foo
我想对这两条路线使用两种不同的处理程序。我知道我能做这样的事。
app.use('/foo', (req, res) => {
if (req.params.foo !== undefined) {
// do something
} else {
// do something else
}
})
但是，这会使代码更难阅读。是否有一种方法来匹配具有参数的路由？我想处理这一情况：
app.use('/foo', x);
app.use('/foo?ba
浏览 4提问于2020-03-10得票数 1
回答已采纳
我使用的是基于xml的camel上下文，它有两条路线。Route1从本地activeMQ和Route2中的队列中读取，由camel计时器组件发起，不引用activeMQ。
启动activeMQ后，我启动了骆驼应用程序，两条路线都运行良好。但是，当activeMQ停止时，两条路由都停止工作。
由于Route2与activeMQ没有任何联系，所以它不应该继续工作吗？我也尝试过在两个骆驼环境中定义这两条路线，但这并没有解决问题。你能帮帮我吗？
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns=&
浏览 1提问于2015-04-04得票数 3
回答已采纳
如果创建方法是从其他路由调用的，我希望验证创建方法中的列是否存在。例如，如果我有以下两条路线：
post 'create_item', to: 'item#create'
post 'create_verified_item', to: 'item#create_verified'
我需要在项目模型中定义这样的东西：
validates :verified_number, presence: true, if: Item.action_name == "create_verified"
有人能帮忙吗？
浏览 0提问于2017-09-14得票数 1
回答已采纳
我理解rails 3中的资源和路径路由，但我不知道有什么方法可以同时使用这两条路由吗？我试过这条路，但它对我不起作用，这是路线：
resources :roles, only: [:index, :create, :show, :update]
get '/roles/:id' => 'roles#available_users'
我们怎样才能使用这两条路线呢？
非常感谢
浏览 2提问于2014-08-09得票数 1
回答已采纳
2回答
我有两条路线
get '/v1/cameras/:id' => 'cameras#single', as: :cameras_single
另一个是
get "v1/cameras/map" => "cameras#map"
两者都受到干扰，好像我要把cameras/map，它作为一个参数到camera/:id，有什么方法来区分它们吗？任何帮助都是感恩的。
浏览 1提问于2016-12-09得票数 1
回答已采纳
当从Google Directions API获取时，我们如何开始两条路线之间的导航。
你有什么想法吗？如何在我们自己的应用程序中集成从一条路线到另一条路线的导航？
我正在从google directions API获取路由，它显示在我的应用程序中。但是，我如何才能使用我当前的位置开始它们之间的导航，而不是使用google地图应用程序，而是在我们自己的应用程序中？
浏览 7提问于2017-04-26得票数 1
我正在开发一个基于角度6 SPA的应用程序，考虑到有两条路线A& B，在路线B中使用组件B，有一个按钮打开模态窗口。现在A路使用A组件，我想打开相同的模态窗口吗？首先，这是可能的吗？
我创建了如下所示的通用组件通信服务，并将其注入组件B，但显然，这是不起作用的。
export class ComponentCommunicationService {
private open= new Subject();
public openModal$ = this.open.asObservable();
open() {
浏览 3提问于2022-03-18得票数 -1
1回答
例如，我有两条路线：
/site/test
/site/test/foo
我需要为UrlManager编写规则，以便它将第一条规则传递给TestController，第二条规则传递给FooController。
我真的可以这么做吗？
浏览 2提问于2015-09-01得票数 0
1回答
让我说我有两条路线如下：
/users - shows list of users
-/:id - shows detail of selected user
给定上述路由的url，/users路由需要知道/:id param，这样它就可以在其列表中显示用户被“选中”。
然后如何在/:id路由中获取/users？
浏览 0提问于2016-01-02得票数 2
回答已采纳
目前正在学习Symfony。只是想知道路线名称，这本书似乎并没有事先说出它们的用途。
据我所知，@Route注释是根据包、控制器和操作名称给出的默认名称。那么，指定自己的路径名有什么意义呢？
好的做法是让所有的路由都有默认的名称吗？
更好的做法是为每条路线指定自己的名字吗？
如果两条路线的名字相同呢？
如果我使用的是已经使用的路由名称，可能是在另一个包中，我怎么知道呢？
浏览 3提问于2015-01-17得票数 2
回答已采纳
1回答
在我的路由文件中，定义了以下路由：
GET /something controllers.Application.something
如果我去mysite.com/something，它可以正常工作，如果我去mysite.com/something/，我会得到一个404。
一个解决方案是有两条路线，一条有斜线，另一条没有它，但谷歌不会喜欢这样的。另一种方法是在控制器中进行某种重定向，但感觉有点尴尬。有什么本地的游戏解决方案可以帮助做到这一点吗？
浏览 1提问于2015-08-10得票数 0
回答已采纳
1回答
我在我的Juniper路由器上有这条路线，有些目的地有两条路线: OSPF和BGP。我想改变BGP路由的管理距离，使其比OSPF路由更小。
我该怎么做呢？
📷
浏览 0提问于2019-04-08得票数 0
回答已采纳
2回答
我有一个页面，我希望它有两个不同的路线：“/管理/时间表”和"/Schedules“
"/ admin /Schedules“如果管理用户和页面将呈现一些管理功能，并且它需要登录...另一方面，"/Schedules“是针对非登录用户的，它将呈现非管理员功能...
但是，页面是相同的，我特别需要这两条路线……
有人知道怎么做吗？
谢谢！
浏览 4提问于2009-01-29得票数 0
回答已采纳
3回答
嗨，我有WEB实现，如下所示。我们在单一方法上使用多条路径。
[SwaggerOperation("Update Records By Id")]
[Route("/construction/field-record")]
[Route("/construction/fieldRecord")]
public async Task<IActionResult> UpdateRecord([FromBody] UpdateRecordRequest request)
{
// ...
}
两个问题，
如何将两条路线中的一条标
浏览 1提问于2018-02-02得票数 12
我有两条路要注册用户，实际上他们不是两条路线，因为他们有相同的路径，但他们有不同的中间件。由于它们有相同的路径，其中一个将优先于其他路径，而另一个路径将无法工作。以下是路线：
// Register a new user as an admin
router.post('/', [auth, authAdmin], async function(req, res, next) { ... });
// Sign in route
router.post('/', async function(req, res, next) { ... });
我如何解决这两条路
浏览 1提问于2021-12-20得票数 2
回答已采纳
1回答
我对laravel中间件有个问题。我不能把它用在两个不同的角色上。
下面是我的代码的一个小部分：
Route::group(['prefix' => '','middleware' => 'can:super_admin'], function () {
Route::group(['prefix' => 'dashboard'], function () {
Route::get('dashboard', 'SuperAdmin
浏览 0提问于2018-05-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
