suchen

Heim  >  Fragen und Antworten  >  Hauptteil

angular.js - 只有用#,angularjs和vuejs的路由才能识别路径?

在Angular中

这是我的路由:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<code>phonecatApp.config(['$routeProvider',

  function($routeProvider) {

    $routeProvider.

      when('/phones', {

        templateUrl: 'partials/phone-list.html',

        controller: 'PhoneListCtrl'

      }).

      when('/phones/:phoneId', {

        templateUrl: 'partials/phone-detail.html',

        controller: 'PhoneDetailCtrl'

      }).

      otherwise({

        redirectTo: '/phones'

      });

  }]);</code>

这是我的html代码:

1

<code><a href="#/phones/{{phone.id}}">{{phone.name}}</a></code>

href属性的开头是个#号,当带着这个#号的时候,路由是正常工作的。如果去掉#号,路由就找不到路径了:

1

<code>Not found</code>

同样的事情还发生在vuejs里

当我使用vuejsvue-router的时候,这是我的路由:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<code>var router = new VueRouter();

router.map({

    "/": {

        component: phoneList

    },

    "/phones": {

        component: phoneList

    },

    "/phones/:phoneId": {

        component: {

            template: 'TBD: detail view for <span>{{$route.params.phoneId}}</span>',

        }

    }

 

});

router.start(app, "#app");</code>

这是html

1

<code><a href="#/phones/{{phone.id}}">{{phone.name}}</a></code>

同样的,带着#号路由正常工作,去掉就:

1

<code>Cannot GET /phones/motorola-xoom-with-wi-fi</code>

为什么会这样?这个#号到底有什么作用?
为什么http://localhost:8000/phones/motorola-xoom就不能识别,http://localhost:8000/app/index.html#/phones/motorola-xoom就能识别出来?

我想大声告诉你我想大声告诉你2840 Tage vor630

Antworte allen(6)Ich werde antworten

  • ringa_lee

    ringa_lee2017-05-15 17:01:24

    Web App 中需要通过URL 标识不同状态,不同状态对应不同URL 既方便前进后退,也方便保存书签。
    不过Web App 中为保证用户体验,页面状态的转换一般是不刷新页面的,这往往通过ajax实现。
    传统的ajax不会影响地址栏(请求通过XHR对象完成,而不是请求新URL),那如果你想让URL对应不同的页面状态怎么办?windows.location之类的方法是会刷新整个页面的。
    这就需要用到传统的#了。锚点这东西本来是让你在当前页面的不同部分移动的,支持前进后退和保存书签,于是就被拿来应用在Web App的路由中。这样www.example.com/index.html#phones 和www.example.com/index.html#users 就能表示两个状态,而且转换不会刷新页面。
    新的History API可以把#去掉,不过需要服务器提供一份fallback版本,这里就不细说了。

    Antwort
    0
  • 巴扎黑

    巴扎黑2017-05-15 17:01:24

    1. 先学习一下前端路由的基本知识,onHashChange, pushState 这些最基本的东西,甚至自己写一个小规模的路由,再去用!

    2. 即使你不学,请认真完整的阅读官方文档,官方例子写得很明白!

    Antwort
    0
  • 高洛峰

    高洛峰2017-05-15 17:01:24

    1

    2

    3

    4

    <code>var router = new VueRouter({

        history: true, //html5模式 去掉锚点

        saveScrollPosition: true //记住页面的滚动位置 html5模式适用

    })</code>

    vue配置路由模式为html5模式 ,官方文档里有提到 但是没说怎么写

    Antwort
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-15 17:01:24

    建议在 html 里 使用 v-link=“{path : '/phones'}” 这样 你就不用管 hash 了

    Antwort
    0
  • 巴扎黑

    巴扎黑2017-05-15 17:01:24

    这是前端实现路由的方式,#后面也就是所谓的hash,其实类似锚点,你所想的那种是path,是需要后端配合的,至于pushstate之类就是为了体验更好,可以后退前进。

    Antwort
    0
  • 淡淡烟草味

    淡淡烟草味2017-05-15 17:01:24

    百度下锚点链接,然后看下angularjs和vuejs的文档,兄弟

    Antwort
    0
  • StornierenAntwort