去除vue路由跳转地址栏后的哈希值#,我们只需要在路由跳转的管理文件router目录下的index.js中加上一句代码即可去掉哈希值#

  1. mode:"history"

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. // 全局导入样式【每个组件都可以用】
  4. import "./statics/site/css/style.css"
  5. import Vue from 'vue'
  6. import VueRouter from 'vue-router'
  7. import ElementUI from 'element-ui';
  8. import axios from 'axios'
  9. import Vuex from 'vuex'
  10. Vue.use(Vuex)
  11. Vue.use(ElementUI);
  12. Vue.use(VueRouter)
  13. import {
  14. addLocalGoods
  15. } from './common/localStorageTool.js'
  16. axios.defaults.baseURL = 'http://39.108.135.214:8899/';
  17. Vue.prototype.$axios = axios
  18. //路由对象相关
  19. import goodslist from './components/goods/goodslist'
  20. import shopcart from './components/shopcart/shopcart'
  21. import goodsinfo from './components/goods/goodsinfo'
  22. import login from './components/account/login'
  23. import order from './components/order/order'
  24. import test from './components/test/test'
  25. import 'element-ui/lib/theme-chalk/index.css';
  26. // 使用懒加载
  27. import VueLazyLoad from 'vue-lazyload'
  28. import moment from 'moment'
  29. //全局过滤器
  30. Vue.filter('dateFmt', (input, formatString = "YYYY-MM-DD") => {
  31. return moment(input).format(formatString)
  32. })
  33. const router = new VueRouter({
  34. mode:"history",
  35. routes: [{
  36. path: '/',
  37. redirect: '/goodslist'
  38. },
  39. {
  40. path: '/goodslist',
  41. component: goodslist
  42. },
  43. {
  44. path: '/goodsinfo/:goodsId',
  45. component: goodsinfo
  46. },
  47. {
  48. path: '/shopcart',
  49. component: shopcart,
  50. meta: {
  51. requiresAuth: true
  52. }
  53. },
  54. {
  55. path: '/login',
  56. component: login,
  57. },
  58. {
  59. path: '/order',
  60. component: order,
  61. },
  62. {
  63. path: '/test',
  64. component: test,
  65. },
  66. ]
  67. })
  68.  
  69. router.beforeEach((to, from, next) => {
  70. if (to.meta.requiresAuth == true) {
  71. next()
  72. } else {
  73. next()
  74. }
  75.  
  76. })
  77. Vue.use(VueLazyLoad, {
  78. error: require('./statics/site/imgs/erro.jpg'),
  79. loading: require('./statics/site/imgs/load.gif')
  80. })
  81. const store = new Vuex.Store({
  82. state: {
  83. buyCount: 0
  84. },
  85. getters: {
  86. getBuyCount: state => {
  87. return state.buyCount
  88. }
  89. },
  90. mutations: {
  91. addGoods(state, payload) {
  92. // 变更状态
  93. state.buyCount = addLocalGoods(payload)
  94.  
  95. },
  96. updateGoods(state, payload) {
  97. state.buyCount = updateLocalGoods(payload)
  98. }
  99. }
  100. })
  101. /**利用Vue框架创建出来的根实例,去把根组件的template中的内容,渲染到id=app的div中去 */
  102. new Vue({
  103. el: "#app",
  104. router,
  105. store,
  106. // render: function (createElement) {
  107. // return createElement(App)
  108. // }
  109. render: h => h(App)
  110.  
  111. })

去除vue路由跳转地址栏后的哈希值#的更多相关文章

  1. Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决

    今天碰到一个问题   vue路由跳转到新的页面时会直接显示页面最底部  正常情况下是显示的最顶部的  而且好多路由中不是全部都是这种情况  折腾好长时间也没解决  最后在网上找到了解决办法 其实原理很 ...

  2. vue路由跳转的方式

    vue路由跳转有四种方式 1. router-link 2. this.$router.push() (函数里面调用) 3. this.$router.replace() (用法同push) 4. t ...

  3. 详解vue 路由跳转四种方式 (带参数)

    详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 ...

  4. vue路由跳转报错解决

    vue路由跳转: setTimeout(function () { console.log(this); this.$router.push("/login"); },800) 语 ...

  5. vue路由跳转取消上个页面的请求和去掉重复请求

    vue路由跳转取消上个页面的请求和去掉重复请求 axios 的二次封装(拦截重复请求.异常统一处理) axios里面拦截重复请求

  6. vue路由跳转时判断用户是否登录功能

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以 ...

  7. Vue路由跳转时显示空白页面,iview的使用

    最近在用iview做项目,需要实现登录,注册,忘记密码等功能.iview-admin本来就有登录功能,于是想照葫芦画瓢,实现登录界面的注册,忘记密码页面路由跳转. router.js里路由配置,刚开始 ...

  8. vue路由跳转传参的两种方法

    路由跳转: this.$router.push({ name: '工单列表', params: {p_camera_dev_name: 'xxx'} }); 使二级菜单呈点击状态: $('[index ...

  9. vue 路由跳转前确认框,刷新浏览器页面前提示确认框

    先看效果图: 1.刷新页面效果: 2.跳转路由(进入别的页面前)效果: 代码: // 路由跳转确认 beforeRouteLeave(to, from, next) { const answer = ...

随机推荐

  1. vue 升降排序

    本实例是根据工作进度的百分比来进行排序. html <div class="ibox-content"> <li v-for="(rangeItem,i ...

  2. JAVA- JDBC之DBHelper

    package com.myit.util; import java.lang.reflect.Field; import java.sql.Connection; import java.sql.D ...

  3. html中css的三种样式

    在html中定义CSS样式的方法有三种,新建CSS文件 使用link 关联 这种是最常用的外部引用样式,第二种讲样式写在 head 头部里面 这种是页面样式 ,第三中样式直接写在行内  style里面 ...

  4. 搭建LoadRunner中的场景(三)场景的执行计划

    所谓场景操作,包括初始化用户组.启动用户组各用户以及停止虚拟用户的全过程.依据设置不同,执行过程中可以最多有5类操作,分别是启动用户组(start group).初始化(Initialize).启动虚 ...

  5. YYYY-mm-dd HH:MM:SS 备忘录

    d 月中的某一天.一位数的日期没有前导零. dd 月中的某一天.一位数的日期有一个前导零. ddd 周中某天的缩写名称,在 AbbreviatedDayNames 中定义. dddd 周中某天的完整名 ...

  6. bzoj3312

    K个硬币,要买N个物品. 给定买的顺序,即按顺序必须是一路买过去,当选定买的东西物品序列后,付出钱后,货主是不会找零钱的.现希望买完所需要的东西后,留下的钱越多越好,如果不能完成购买任务,输出-1 $ ...

  7. 网络最大流dinic模板

    #include<iostream> #include<cstdio> #include<cstring> #include<queue> using ...

  8. 批处理中格式化Date

    @Echo Off Set _Date=%date% If "%_Date%A" LSS "A" (Set _NumTok=1-3) Else (Set _Nu ...

  9. win7-64 mysql的安装

    1.https://jingyan.baidu.com/article/597035521d5de28fc00740e6.html 2.net start mysql 无法启动的3534的错误的解决办 ...

  10. web.xml中的<jsp-config>的用法详解

    <jsp-config> 包括<taglib> 和<jsp-property-group> 两个子元素. 其中<taglib>元素在JSP 1.2时就已 ...