Angular2 路由刷新404解决办法

我的其它博客将同步更新:CSDN简书github

问题:Angular2设置路由,部署后刷新后Tomcat直接出来404。
开篇题外话:
从来只逛博客,赞都懒得点的人突然开始写博客。只是因为最近接触了Angular2,网上资源太少,之前又没有Angular1的基础,真是举步维艰,记录下自己艰辛的历程。同时公司没有建立知识库博客等相关的工具,在此方便交流下,还有上班些博客其实不当误工作的 ^_^ (代码部分也不涉及公司业务)。已经研究了一个星期,前面遇到的诸多问题后续争取不上。
一、开发环境:
1、后台前端

Maven + Spring + SpringMVC + Mybatis
Spring:spring-4.0.2.RELEASE
SpringMVC:spring-webmvc-4.0.2.RELEASE
Mybatis:mybatis-3.2.6
开发工具:Eclipse Neon Release (4.6.0) 

2、前台框架

Angular2 + Bootstrap 4
Angular:Angular2.1
Bootstrap:Bootstrap v4.0.0-alpha
开发工具:Eclipse + nodejs + angular-cli

二、问题
angular2 编写路由后(如下)在npm start后可以正常访问,但是打包发布到服务器(tomcat)刷新后出现404的问题。

const routes: Routes = [
{ path: '', redirectTo: '/index', pathMatch: 'full' },
{ path: 'index',    component: IndexComponent },
{ path: 'main',    component: MainComponent },
{ path: 'help',    component: HelpComponent }
];

三、解决方式
分析:angular2 毕竟是客户端执行的,当直接访问路由地址时服务器也不知到底是什么请求,所以就404 。
so,问题来了。
1、直接访问路由地址时服务器到底访问的时生么?很简单,当然是angular的首页了(我的是index.html)。
2、访问路由时,服务器将地址转发到angular首页行不行?试了下确实可以,事实证明还是可以正常使用的,至于参数会不会丢,还么试验,应该是没问题的。
思路这里,大家随意,我是下面这样做的。
网上也有篇文章提到在web.xml中配置拦截,导入个jar,实现跳转的,我没这样搞。
由于我后端使用的SpringMVC,默认是拦截所有的请求,且不带.do(有强迫症),上代码

<!--  web.xml -->
<servlet-mapping>
    <servlet-name>SpringMVC</servlet-name>
    <!-- 此处可以可以配置成*.do,对应struts的后缀习惯 -->
    <url-pattern>/</url-pattern>
</servlet-mapping> 
    <!-- 自动扫描该包,使SpringMVC认为包下用了@controller注解的类是控制器 -->
    <context:component-scan base-package="com.ovit" />

于是各种思想斗争下开劈了一个新的控制器/web,

package com.ovit.framework.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
/**
 * 用于处理路由
 * @author Lichun
 *
 */
@Controller
@RequestMapping("/web")
public class WebController extends BaseController {
    /**
     * 默认处理/web下说有的请求,全部转发到index.html
     * @param request
     * @param response
     */
    @RequestMapping("**")
    public void routes(HttpServletRequest request ,HttpServletResponse response) { 
        request.setAttribute("routes","路由跳转");
        try {
            // 此处路径要打两点,如果直接写 index.html 会循环反问/web/index.html 造成死循环
            request.getRequestDispatcher("../index.html").forward(request,response);
        } catch (Exception es) {
            log.error("路由失败",es);
        }
    } 
}

路由配置

// app-routing.module.ts

import { NgModule }            from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { IndexComponent }  from './index/index.component';
import { MainComponent }    from './main/main.component';
import { HelpComponent }    from './help/help.component';
const routes: Routes = [
{ path: '', redirectTo: '/web/index', pathMatch: 'full' },
{ path: 'web/index',    component: IndexComponent },
{ path: 'web/main',    component: MainComponent },
{ path: 'web/help',    component: HelpComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值