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

问题描述

这是我的路由：

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='https://www.haobala.com/wenda/14527.html#/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='https://www.haobala.com/wenda/14527.html#/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就能识别出来？

问题解答

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版本，这里就不细说了。

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

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

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

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

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

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

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