针对SEO优化，Angular和Vue的通病“#”该如何处理（图文）

目前的前端技术市面上常见的两种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