Angular2 路由刷新404解决办法
来源:互联网 发布:淘宝分销一件代发 编辑:程序博客网 时间:2024/05/29 16:52
我的其它博客将同步更新:CSDN、简书、github
问题:Angular2设置路由,部署后刷新后Tomcat直接出来404。
开篇题外话:
从来只逛博客,赞都懒得点的人突然开始写博客。只是因为最近接触了Angular2,网上资源太少,之前又没有Angular1的基础,真是举步维艰,记录下自己艰辛的历程。同时公司没有建立知识库博客等相关的工具,在此方便交流下,还有上班些博客其实不当误工作的 ^_^ (代码部分也不涉及公司业务)。已经研究了一个星期,前面遇到的诸多问题后续争取不上。
一、开发环境:
1、后台前端
Maven + Spring + SpringMVC + MybatisSpring:spring-4.0.2.RELEASESpringMVC:spring-webmvc-4.0.2.RELEASEMybatis:mybatis-3.2.6开发工具:Eclipse Neon Release (4.6.0)
2、前台框架
Angular2 + Bootstrap 4Angular:Angular2.1Bootstrap: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.tsimport { 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 {}
- Angular2 路由刷新404解决办法
- angular2路由
- angular2 路由
- Angular2-路由
- ANGULAR2 深入学习路由
- angular2 路由导航补遗
- Angular2之二级路由
- angular2地址栏读取路由
- angular2 路由策略 LocationStrategy
- angular2 路由学习
- Angular2 父子路由问题
- Angular2--通配符路由
- Angular2--通配符路由
- Angular2路由的简单实用
- Angular2初级篇之路由
- Angular2 之 路由与导航
- Angular2 指令—路由指令
- angular2实战笔记--路由篇
- [goa]golang微服务框架学习--安装使用
- 王朝 第九周三角面积
- Linux有线网络链接
- uboot_配置过程
- 使用animate.css为你的网页添加动画
- Angular2 路由刷新404解决办法
- Android进阶篇【chapter-10】 RecyclerView的使用与RecyclerView多类型视图的构造
- Matlab 中的cell类型
- [goa]golang微服务框架学习(二)-- 代码自动生成
- 分数数列求和
- CSS基础02
- leetcode7: Reverse Integer
- WIKIOI 1001
- 欢迎使用CSDN-markdown编辑器