首页 > 只有用#,angularjs和vuejs的路由才能识别路径?

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

在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里

当我使用vuejsvue-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就能识别出来?


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

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


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


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


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

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


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


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

【热门文章】
【热门文章】