URL在浏览器刷新时发生变化（$ routeProvider用于客户端路由）

我使用Angular作为客户端和Nodejs（Express）作为服务器端来构build单页应用程序。 为了支持不同视图的浏览器历史，我正在使用$ routeProvider。 如果我不刷新浏览器，效果很好。 但是，每当我刷新浏览器，我注意到URL被更改，造成问题，因为该URL模式不存在于服务器。 以下是更多细节。

Angular js路由器代码：

$routeProvider. when('/categoryview', { templateUrl: 'templates/partials/app/categoryview/CategoryView.html', controller: 'ApplicationController' }). when('/:categoryId/themes', { templateUrl: 'templates/partials/app/themeview/ThemeView.html', controller: 'ThemeViewController' }) .otherwise({redirectTo: '/categoryview'}); 

作为第一次启动的应用程序的浏览器中的URL： http://localhost:3000/themelibrary#/categoryview

刷新浏览器中的URL： http://localhost:3000/categoryview#/categoryview

如果你注意到，那么你会发现根URL “/ themelibrary”被改成“/ categoryview” ，由于服务器不支持“/ categoryview”而导致问题。 我也尝试了不同版本的Angularjs，但没有成功。

请帮助，让我知道是否需要更多的代码来解释这个问题。

编辑：添加Nodejs路由器的详细信息UI路由：

 module.exports = function(app, passport) { // route for home page app.get('/', function(req, res) { res.redirect('/login'); }); //Route for login to present the login page back to user app.get('/login', function(req, res) { res.set({'content-type': 'text/html; charset=utf-8'}) res.render('login.ejs', {message: req.flash('loginMessage')}) }); //Route to get the username and password and authenticate app.post('/authenticate', passport.authenticate('local-login', { successRedirect: '/themelibrary', // redirect to the secure themelibrary section failureRedirect: '/login', // redirect back to the signup page if there is an error failureFlash: true // allow flash messages })); // route for default lending page app.get('/themelibrary', isLoggedIn, function(req, res) { var url= require('url'); console.log("themelibrary hash url >> " + url.hash); res.charset = 'utf8'; res.set({'content-type': 'text/html; charset=utf-8'}) res.render('index.ejs', { user: req.user // get the user out of session and pass to template }); }); // route middleware to make sure a user is logged in function isLoggedIn(req, res, next) { // if user is authenticated in the session, carry on if (req.isAuthenticated()) return next(); // if they aren't redirect them to the home page res.redirect('/'); } 

API路线：

 module.exports = function(app) { app.get('/users/:id', userService.getUserById); app.get('/users', userService.getAllUsers); app.post('/themes', themeService.addTheme); app.get('/themes/:id', themeService.getThemeById); app.put('/themes/:id', themeService.updateTheme); app.delete('/themes/:id', themeService.deleteTheme); app.get('/themes', themeService.getThemes); app.get('/resources/:code', languageResourceService.getLanguageResourceByCode); app.get('/config', applicationConfigService.getApplicationConfig); app.post('/keepalive', applicationConfigService.keepAlive); app.get('/categories', categoryService.getAllCategories); }; 

Answer 1

我需要看到你的快速路由规则给出一个完整的答案，但由于themelibrary不是一个有效的路由根据$ routeProvider， otherwise你的规则正在被激活，如果你从你的应用程序浏览到这个。

如果在此URL刷新浏览器，$ routeProvider被绕过，并且请求被直接发送到您的node.js实例，express将处理该路由。

至于哈希路由，这一切都取决于，如果你有html5mode启用或没有@大卫spence指出。

编辑

这便士终于落到了这一颗。 如果您的angular度应用程序已加载（并且加载的唯一方法是通过/themelibrarypath），它将接pipe您的所有路由，所以通过应用程序的任何路由更改将由ngRoute处理。 也就是说， 不会有页面重新加载 。 因此，如果后端服务器被/categoryview的请求命中，则应用程序的某些其他部分通过window.location.href或类似的方式请求整个页面redirect。

总之，你的路线是好的，应用程序的其他部分绕过你的路线，直接回到服务器（它不应该）。