1.原因:AngularJS 版本更新至1.6后对地址做了特别处理。如:<a hret="#/someurl"> 在浏览器中被解析为“#!%2Fsomeurl”,导致路由无法跳转。

解决办法:如果您希望路由中没有哈希前缀,那么可以通过向应用程序添加配置块来恢复以前的行为如下:stackoverflow中的连接

appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);

2.ngRoute使用实例(mvc web项目为例子)

一 新建ASP.NET Web应用程序(.NET Framework),进入后选择mvc

二 使用nuget包管理安装angular1.6包,并添加文件夹结构如下

在BundleConfig.cs中添加如下代码

    bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.js",
"~/Scripts/angular-route.js",
"~/Scripts/angular-animate.js"
)); bundles.Add(new ScriptBundle("~/bundles/app").Include(
"~/App_Myapp/js/app.js"
));

在—layout.cshtml中添加如下内容

app.js文件中内容如下:

var app = angular.module('myapp', ['ngRoute', 'ngAnimate']);

app.config(['$locationProvider', function ($locationProvider) {
$locationProvider.hashPrefix('');
}]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/App_Myapp/Index', {
controller: 'HomeController',
templateUrl: '/App_Myapp/views/Index.html'
})
.when('/App_Myapp/Table1', {
controller: 'HomeController',
templateUrl: '/App_Myapp/views/tables/Table1.html'
})
.when('/App_Myapp/Table2', {
controller: 'HomeController',
templateUrl: '/App_Myapp/views/tables/Table2.html'
})
.otherwise({ redirectTo: '/App_Myapp/Index' });
}]); app.controller('HomeController', ['$scope', function ($scope) {
$scope.title = "这是一个AngularJS应用程序";
}]);

点击运行即可

ngRoute 配置路径不能跳转问题的更多相关文章

  1. 从零开始搭建口袋妖怪管理系统(2)-借助ngRoute实现详情页面跳转

    一.目标 上一次我们用Angular1.x完成了简单的口袋妖怪展示列表页面,现在我们想要了解口袋妖怪更多的信息,但是发现原有单行表格可能容纳不下口袋妖怪的所有信息,所以现在我们需要一个口袋妖怪详情界面 ...

  2. nginx配置http强制跳转https

    nginx配置http强制跳转https 网站添加了https证书后,当http方式访问网站时就会报404错误,所以需要做http到https的强制跳转设置. 一.采用nginx的rewrite方法 ...

  3. Nginx 配置 http 强制跳转到 https

    个人真实配置 架构:Nginx 反向代理 + Nginx 前端(LNMP) 在 Nginx 反向代理的 虚拟机主机配置文件中,作如下配置: upstream ilexa_cn { server 192 ...

  4. k8s中的nginx-ingress如何配置路径重定向

    k8s中的nginx-ingress如何配置路径重定向 一. 需求描述 路径重定向的一般应用场景: 调整用户浏览的URL,看起来更规范 为了让搜索引擎收录网站内容,让用户体验更好 网站更换新域名后 根 ...

  5. jsp中的路径与跳转

    在jsp(serlvet)中,页面的"变换"有两种方式,第一重定向,第二转发: 先说重定向,它的调用方式是这样的 response.sendredirect("uri&q ...

  6. cdnbest配置强制ssl跳转

    如何配置强制ssl跳转 1. 登陆用户站点,点击下图图标: 2. 如下图添加证书和开启强制ssl即可 hsts解释和作用: 国际互联网工程组织IETF正在推行一种新的Web安全协议HTTP Stric ...

  7. webpack配置路径及hash版本号,利用html-webpack-plugin自动生成html模板

    在项目中,因为需要经常更新文件,但是浏览器缓存问题导致js文件不是最新的,所有想办法添加hash值. 并配置webpack打包文件配置路径: 配置webpack打包文件路径,及非入口 chunk文件: ...

  8. 如何解决安装istio后istioctl命令每次使用都需要重新配置路径

    Kubernetes在安装istio后初次使用istioctl命令时会提示istioctl command not found 这时候如果在istio文件夹的根目录下配置 export PATH=$P ...

  9. 修改Nodejs内置的npm默认配置路径方法

    Nodejs 内置的npm默认会把模块安装在c盘的用户AppData目录下(吐槽一下:不明白为啥现在的软件都喜欢把资源装在这里) C盘这么小,肯定是不行的,下面一步步修改到D盘 1.打开cmd命令行, ...

随机推荐

  1. Linux内核--链表结构(一)

    一.前言 Linux内核链表结构是一种双向循环链表结构,与传统的链表结构不同,Linux内核链表结构仅包含前驱和后继指针,不包含数据域.使用链表结构,仅需在结构体成员中包含list_head*成员就行 ...

  2. 基于 Apache Hudi 构建增量和无限回放事件流的 OLAP 平台

    1. 摘要 在本博客中,我们将讨论在构建流数据平台时如何利用 Hudi 的两个最令人难以置信的能力. 增量消费--每 30 分钟处理一次数据,并在我们的组织内构建每小时级别的OLAP平台 事件流的无限 ...

  3. Vuecli版本调整

    1.当前版本号查看 1.Windows+R打开命令提示符2.输入cmd3.vue --version或者vue -V(大写V) 2.版本操作 安装指定版本 情况一:目前处于3.0及以上 版本查看和卸载 ...

  4. git-config配置多用户环境以及 includeIf用法

    git-config配置多用户环境以及 includeIf用法 git-config配置多用户环境以及 includeIf用法 背景 介绍 配置 栗子 背景 开发人员经常遇到这样的问题,公司仓库和个人 ...

  5. Promql基础语法2

    数据样本 直方图类型 delta函数 运算操作 数学运算 node_disk_info / 100 当瞬时向量与标量之间进行数学运算时,数学运算符会依次作用域瞬时向量中的每一个样本值,从而得到一组新的 ...

  6. [AcWIng 799] 最长连续不重复子序列

    点击查看代码 #include<iostream> using namespace std; const int N = 1e5 + 10; int a[N], s[N]; int mai ...

  7. 利用expect批量修改Linux服务器密码

    一个执着于技术的公众号 背景 修改Linux系统密码,执行passwd即可更改密码.可如果有成千上百台服务器呢,通过ssh的方式逐一进行修改,对我们来说,工作量是非常大,且效率非常低下.因此采用批量修 ...

  8. 项目文章|DNA(羟)甲基化研究揭示铁离子依赖表观调控促进狼疮致病性T细胞分化|易基因

    易基因(羟)甲基化DNA免疫共沉淀测序(h)MeDIP-seq研究成果见刊<Journal of Clinical Investigation> 2022年5月2日,中南大学湘雅二医院赵明 ...

  9. 腾讯tbs 内存泄露

    一.背景 TBS(腾讯浏览服务)是腾讯提供的移动端webview体验的整套解决方案(https://x5.tencent.com/docs/index.html),可以用于移动端加载doc.xls.p ...

  10. JS 加载

    DOM 加载完毕后执行,不需要等待image.js.css.iframe等加载 1.$(function() {}) 2.$(document).ready(function() {})  不要写成 ...