推外网络专注营销型网站品牌策划与推广

FOCUS MARKETING WEBSITE BRAND PLANNING AND MARKETING PROMOTION

针对SEO优化,Angular和Vue的通病“#”该如何处理

2019-09-28 14:04:24 100000+ 编辑:推外网络 来源:本站原创

目前的前端技术市面上常见的两种angularjs、Vuejs。这两种前端技术的URl模式都有两种:hash,history,其中hash就是有“#”号的路由模式,url中携带“#”号,例:http://ncai.netconcepts.cn#/app/meeting/view

这样的路径对于seo优化有一定的影响,那该如何去掉angularjs和vuejs中的“#”号呢?

Angularjs:对于默认的情况,是不启动HTML5模式的,URL中会包括一个#号

所以我们在这里要启动HTML5模式,在你的路由配置文件中添加以下代码

angular.module('app')

.run(

['$rootScope','$state','$stateParams',

function($rootScope,$state,$stateParams){

$rootScope.$state=$state;

$rootScope.$stateParams=$stateParams;

}

]

)

.config(

['$stateProvider','$urlRouterProvider','$locationProvider',

function($stateProvider,$urlRouterProvider,$locationProvider){

$locationProvider.html5Mode(true);

Vuejs:vue中默认的router的mode是hash模式,需要将其改成history模式

constrouter=newVueRouter({

mode:'hash',//hash、history

上一步,你会发现通过路由跳转的完全没有问题,但是手动刷新之后,页面找不到,所以要在Nginx中做一些配置

添加type_files

type_files/{

$uri$uri//index.html;

}

收工,这样设置以后,你发布好的网站就可以完全去掉“#”

http://ncai.netconcepts.cn/app/meeting/view


本站文章均为推外网络摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,我们谢绝直接复制和抄袭!感谢...