angular.js - Angular模板中链接前面不带#,如何能路由到模板?
高洛峰
高洛峰 2017-06-27 09:18:42
0
1
989

使用angular做一个文档帮助,左侧是目录树,右侧用到ng-view
首页如下:

    <p class="container-fluid  bs-docs-container">
        <p class="row">
        <p id="doc_navbar" ng-controller="DocMenu" ng-init="init()" class="col-md-3 col-sm-3 col-sx-3">
          <p class="bs-sidebar hidden-print affix-top">
              <ul class="nav bs-sidenav">
                <li class="panel-title">
                  <a href="#en-us_topic_0059503914.html">概述</a>
                  <a href="#en-us_topic_0055728380.html">FAQ</a>
                </li>
               </ul>
          </p>
        </p>

            <p class="col-md-9 col-sm-9 col-sx-9" ng-view data-spy="scroll" data-target="doc_navbar">

                <!-- <p style="margin-bottom: 100px;"></p> -->

            </p>
        </p>
        <!-- docs end -->

    </p>

js文件如下

'use strict';

angular.module('portalDoc', ['ngRoute'])
.controller('DocMenu', function() {
})
.controller('DocContent', function($scope) {
})
.config(function($routeProvider, $locationProvider) {
    $routeProvider
    .when('/en-us_topic_0059503914.html', { templateUrl: 'en-us_topic_0059503914.html'})
    .when('/en-us_topic_0055728380.html', { templateUrl: 'en-us_topic_0055728380.html'})
    .when('/en-us_topic_0054463579.html', { templateUrl: 'en-us_topic_0054463579.html'})
    .when('/en-us_topic_0055728381.html', { templateUrl: 'en-us_topic_0055728381.html'})
    .when('/en-us_topic_0055728382.html', { templateUrl: 'en-us_topic_0055728382.html'})
    .when('/en-us_topic_0054463600.html', { templateUrl: 'en-us_topic_0054463600.html'})
    .when('/en-us_topic_0054463621.html', { templateUrl: 'en-us_topic_0054463621.html'})
    .when('/en-us_topic_0054463631.html', { templateUrl: 'en-us_topic_0054463631.html'})
    .when('/en-us_topic_0054463504.html', { templateUrl: 'en-us_topic_0054463504.html'})
    //$locationProvider.html5Mode(true);
});

正常访问时链接是这样 http://localhost:8011/home.html#/en-us_topic_0055728380.html

碰到一个问题无法解决,templateUrl中各html之间互相会链接,直接用的<a href="en-us_topic_0054463504.html">xxxx</a>
现在href前面没有“#”,直接单击链接访问链接是 http://localhost:8011/en-us_topic_0054463504.html ,只显示模板页面单独的内容,不能加载首页那些内容,少了/home.html的内容

由于模板的内容是用其他工具写作生成,链接前没有'#'(不方便加,因为还有其他用途)

在这种情况下,链接如何能够路由到模板?能让链接变成这种 http://localhost:8011/home.html#/en-us_topic_0055728380.html

非常感谢!


另外,尝试过使用 locationProvider.html5Mode(true),访问home.html时链接变成 http://localhost:8011/,左侧链接去掉#能正常访问,在home.html跳转到en-us_topic_0054463504.html时,链接变成 http://localhost:8011/en-us_topic_0054463504.html ,能正常访问,但是新开一个tab直接放 http://localhost:8011/en-us_topic_0054463504.html 又变成不加载首页home.html那种情况

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(1)
给我你的怀抱

第一个问题 你用路由了 普通的a标签是不能这样跳转的 要用相应的路由a标签跳转 或者用函数做路由跳转
第二个问题 你想直接访问子路由这个是要服务器配伪静态

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板