angular.js - Only routes with #, angularjs and vuejs can identify paths?

Question

In Angular

This is my route:

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

This is my htmlcode:

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

The

href attribute starts with a # number. When this # number is included, routing will work normally. If you remove the # number, the route will not find the path:

Not found

The same thing happens in vuejs

When I use vuejs and vue-router, this is my route:

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

This is html:

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

Similarly, routing with the # number works normally. Remove it:

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

Why is this happening? What exactly does this # number do?
Why can’t http://localhost:8000/phones/motorola-xoom be recognized but http://localhost:8000/app/index.html#/phones/motorola-xoom can be recognized?

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