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

Question

在Angular中

这是我的路由：

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'
      });
  }]);

这是我的html代码：

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

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

Not found

同样的事情还发生在vuejs里

当我使用vuejs和vue-router的时候，这是我的路由：

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");

这是html：

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

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

Cannot GET /phones/motorola-xoom-with-wi-fi

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

Answer 1

Web App needs to identify different states through URLs. Different states correspond to different URLs, which is convenient for going forward and backward, and for saving bookmarks.
However, in order to ensure user experience in Web Apps, page status transitions generally do not refresh the page, which is often achieved through ajax.
Traditional ajax will not affect the address bar (the request is completed through the XHR object, rather than requesting a new URL), so what if you want the URL to correspond to different page states? Methods such as windows.location will refresh the entire page. windows.location之类的方法是会刷新整个页面的。
这就需要用到传统的#了。锚点这东西本来是让你在当前页面的不同部分移动的，支持前进后退和保存书签，于是就被拿来应用在Web App的路由中。这样www.example.com/index.html#phones 和www.example.com/index.html#users 就能表示两个状态，而且转换不会刷新页面。
新的History API可以把#This requires the use of traditional #. Anchor points originally allowed you to move between different parts of the current page, supporting forward and backward and saving bookmarks, so they were used in the routing of Web Apps. In this way, www.example.com/index.html#phones and www.example.com/index.html#users can represent two states, and the transition will not refresh the page.

The new History API can remove #, but the server needs to provide a fallback version, so I won’t go into details here. 🎜

Answer 2

1. First learn the basic knowledge of front-end routing, the most basic things such as onHashChange and pushState, and even write a small-scale route yourself before using it!

2. Even if you don’t learn, please read the official documentation carefully and completely, the official examples are very clear!

Answer 3

var router = new VueRouter({
    history: true, //html5模式 去掉锚点
    saveScrollPosition: true //记住页面的滚动位置 html5模式适用
})

Vue configures the routing mode to html5 mode. It is mentioned in the official document but it does not say how to write it

Answer 4

It is recommended to use v-link="{path : '/phones'}" in html so that you don’t have to worry about hash

Answer 5

This is the way the front end implements routing. #The back end is also called hash, which is actually similar to an anchor point. What you think of is a path, which requires the cooperation of the back end. As for pushstate and the like, it is for a better experience and you can go back. go ahead.

Answer 6

Download the anchor link on Baidu, and then read the documentation of angularjs and vuejs, brother