专栏首页web开发VUE路由去除#问题

VUE路由去除#问题

最近自己在写一个vue的小型管理系统,在浏览器中看到的路由都是带有#的,很是不好看。为了解决此问题,大家一般都会想到:mode: 'history'。可是在开发阶段没有问题,但是一旦build打包后,访问并刷新浏览器后,页面就会报404的错误,为了解决打包后刷新浏览器报404的问题,如果使用nginx的话,还需要做如下配置。下面贴出完整的解决方案。

1、路由代码中添加mode:'history'

在new Router()的下一行添加上:mode: 'history',

import Vue from 'vue'
import Router from 'vue-router'
import Utils from '@/js/utils.js'
import Login from '@/components/Login'
import PerInfo from '@/components/perInfo/perInfo'
import Home from '@/components/Home'
import Dashboard from '@/components/Dashboard'
import UserList from '@/components/user/userList'
import UserAdd from '@/components/user/userAdd'

Vue.use(Router)

const router = new Router({
  mode: 'history',  //去掉url中的#
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect: '/login',
      // iconCls: 'iconfont icon-home',  //图标样式class
      children: [
        {path: '/home', component: Dashboard, name: '首页'}
      ]
    },
    {
      path: '/login',
      name: '登录',
      component: Login
    },
    {
      path: '/home',
      name: '仪表盘',
      component: Dashboard
    },
    {
      path: '/user',
      component: Home,
      name: '用户管理',
      children: [
        {path: '/user/list', component: UserList, name: '用户列表'},
        {path: '/user/add', component: UserAdd, name: '添加用户'}
      ]
    },
    {
      path: '/',
      component: Home,
      name: '系统设置',
      children:[
        {path: '/setting/perInfo', component: PerInfo, name: '个人信息'}
      ]
    }
  ]
})

router.beforeEach((to, from, next) => {
  console.log('开始页面切换');
  console.log(to.fullPath)
  var tempId = Utils.getCookie('temp-id');
  var userInfo = sessionStorage.getItem('ssm_u_info');
  if(to.fullPath != '/login' && (tempId == null || tempId == '' || userInfo == null || userInfo == '')){
    window.location.href = '/login';
  }
  next();
});

export default router

2、nginx配置

2.1、在nginx目录下新建 vhosts目录

2.2、在vhosts目录下新建my-vue.conf配置文件

2.3、在nginx的配置文件my-vue.conf中添加:try_files $uri $uri/ /index.html;

my-vue.conf文件内容:

server {
    listen 80;
    server_name my.vue.com;

    charset utf-8;

    location / {
        root /Users/libo/Documents/workspace/Vue-me/my-project/dist;
        index index.html index.htm index.php;
        try_files $uri $uri/ /index.html;
    }
    
    location ^~ /ssm_project/ {
        proxy_pass http://127.0.0.1:8081;
        proxy_cookie_path /127.0.0.1:8081/ /;
         proxy_pass_header Set-Cookie;
        proxy_set_header Host 127.0.0.1:8081;
    }
}

 2.4、在nginx目录下的nginx.conf http下的最后添加如下代码

 2.5、配置hosts文件

在/private/etc下的hosts文件添加如下内容:

   127.0.0.1   my.vue.com

3、访问效果

在命令行执行sudo nginx命令,以启动nginx服务,即可访问,在浏览器中输入my.vue.com,回车后页面如下

登录系统,点击用户列表菜单:

此时此刻,无论当前路由显示的是在登录页还是其他页面,再刷新浏览器,页面也不会报404了,大功告成!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • java导出Excel表格

    最近自己着手写了一个前后端分离的后台管理系统(主要是写着玩,java还是熟悉一点,所以前后端均是自己写),后端使用的Java SpringMVC。后来想着在用户...

    用户1174387
  • 前后端分离跨服务器文件上传-Java SpringMVC版

     近来工作上不上特别忙,加上对后台java了解一点,所以就抽时间,写了一个java版本的前后端分离的跨服务器文件上传功能,包括前后端代码。 一、Tomcat服务...

    用户1174387
  • js拖拽上传图片

    有时候,在开发中,需要遇到拖拽上传图片的需求,即从磁盘选中一张或多张图片,然后按着鼠标把图片拖动到页面上指定的区域,实现图片的上传。

    用户1174387
  • spring AOP日志管理

    Spring AOP 完成日志记录 SpringAOPAspectJsecurity日志记录 Spring AOP 完成日志记录 1、技术目标 掌握S...

    用户1212940
  • Java接入Spark之创建RDD的两种方式和操作RDD

    首先看看思维导图,我的spark是1.6.1版本,jdk是1.7版本 ? spark是什么? Spark是基于内存计算的大数据并行计算框架。Spark...

    汤高
  • Android:手把手带你入门神秘的 Rxjava

    即RxJava原理可总结为:被观察者 (Observable) 通过 订阅(Subscribe) 按顺序发送事件 给观察者 (Observer), 观察者(O...

    Carson.Ho
  • Android RxJava:这是一份面向初学者的RxJava使用指南

    更重要的是,随着程序逻辑的复杂性提高,它依然能够保持简洁 & 优雅。所以,一般建议使用这种基于事件流的链式调用方式实现RxJava。

    Carson.Ho
  • Android:这是一篇 清晰 易懂的Rxjava 入门教程

    2、如果读者还没学习过Rxjava 1.0也没关系,因为Rxjava 2.0只是在Rxjava 1.0上增加了一些新特性,本质原理 & 使用基本相同

    用户2802329
  • 这是一篇清晰易懂的 Rxjava 入门教程

    ? 原文作者:Carson_Ho 原文地址:http://www.jianshu.com/p/a406b94f3188 特别声明:本文为Carson_Ho原创...

    非著名程序员
  • webpack+es6+angular1.x项目构建

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    j_bleach

扫码关注云+社区

领取腾讯云代金券