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 中需要通过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版本，这里就不细说了。

Answer 2

先学习一下前端路由的基本知识，onHashChange, pushState 这些最基本的东西，甚至自己写一个小规模的路由，再去用！
即使你不学，请认真完整的阅读官方文档，官方例子写得很明白！

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

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

angularjs和vuejs的路由用#识别路径

良_123

在Angular中

同样的事情还发生在vuejs里

6 个回答

所有评论(0)

良_123