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

mode:"history"

import Vue from 'vue'
import App from './App.vue'
// 全局导入样式【每个组件都可以用】
import "./statics/site/css/style.css"
import Vue from 'vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui';
import axios from 'axios'
import Vuex from 'vuex'
Vue.use(Vuex)
Vue.use(ElementUI);
Vue.use(VueRouter)
import {
addLocalGoods
} from './common/localStorageTool.js'
axios.defaults.baseURL = 'http://39.108.135.214:8899/';
Vue.prototype.$axios = axios
//路由对象相关
import goodslist from './components/goods/goodslist'
import shopcart from './components/shopcart/shopcart'
import goodsinfo from './components/goods/goodsinfo'
import login from './components/account/login'
import order from './components/order/order'
import test from './components/test/test'
import 'element-ui/lib/theme-chalk/index.css';
// 使用懒加载
import VueLazyLoad from 'vue-lazyload'
import moment from 'moment'
//全局过滤器
Vue.filter('dateFmt', (input, formatString = "YYYY-MM-DD") => {
return moment(input).format(formatString)
})
const router = new VueRouter({
mode:"history",
routes: [{
path: '/',
redirect: '/goodslist'
},
{
path: '/goodslist',
component: goodslist
},
{
path: '/goodsinfo/:goodsId',
component: goodsinfo
},
{
path: '/shopcart',
component: shopcart,
meta: {
requiresAuth: true
}
},
{
path: '/login',
component: login,
},
{
path: '/order',
component: order,
},
{
path: '/test',
component: test,
},
]
}) router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth == true) {
next()
} else {
next()
} })
Vue.use(VueLazyLoad, {
error: require('./statics/site/imgs/erro.jpg'),
loading: require('./statics/site/imgs/load.gif')
})
const store = new Vuex.Store({
state: {
buyCount: 0
},
getters: {
getBuyCount: state => {
return state.buyCount
}
},
mutations: {
addGoods(state, payload) {
// 变更状态
state.buyCount = addLocalGoods(payload) },
updateGoods(state, payload) {
state.buyCount = updateLocalGoods(payload)
}
}
})
/**利用Vue框架创建出来的根实例,去把根组件的template中的内容,渲染到id=app的div中去 */
new Vue({
el: "#app",
router,
store,
// render: function (createElement) {
// return createElement(App)
// }
render: h => h(App) })

去除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. java语言中Object对象的hashCode()取值的底层算法是怎样实现的

    Java语言中,Object对象有个特殊的方法:hashcode(), hashcode()表示的是JVM虚拟机为这个Object对象分配的一个int类型的数值,JVM会使用对象的hashcode值来 ...

  2. 关于NIO编程

    NIO概述 什么是NIO? Java NIO(New IO)是一个可以替代标准Java IO API的IO API(从Java 1.4开始),Java NIO提供了与标准IO不同的IO工作方式. Ja ...

  3. Discuz X3游客看小图功能导致文字内容隐藏的【修复方法】

    如果帖子内容以图片开始,并且开启了游客看小图功能,那么图片下面的文字也会被隐藏,这是不科学的(在图片上边的文字不会被隐藏)查看DZ源代码,发现是程序猿疏忽漏掉了</div> 下边1314学 ...

  4. Could not find JSON in http://updates.jenkins-ci.org/update-center.json?id=default&version=2.7.4

    14-Sep-2016 21:43:58.241 INFO [Download metadata thread] hudson.model.AsyncPeriodicWork$1.run Finish ...

  5. python之tkinter_2

    关于tkinter的组件介绍,这篇博客很详细: https://www.cnblogs.com/aland-1415/p/6849193.html tkinter is to make interfa ...

  6. 淘宝双十一页面(Flexible)demo

    下面的代码是看了大漠 使用Flexible实现手淘H5页面的终端适配 做的一个demo. <!DOCTYPE html> <html lang="en" ng-a ...

  7. struts2框架xml验证

    struts2验证分为3步: 1.获取需要验证的信息,使用同名属性,提供getter,setter方法.然后框架使用反射将值自动注入. 2.对信息进行验证,成功失败作出对应的选择. xml验证和手动验 ...

  8. ACM学习历程—SNNUOJ 1116 A Simple Problem(递推 && 逆元 && 组合数学 && 快速幂)(2015陕西省大学生程序设计竞赛K题)

    Description Assuming a finite – radius “ball” which is on an N dimension is cut with a “knife” of N- ...

  9. java定时器,留着用

    说明:该定时器作用是 设定定时器首次执行的时间firstTime和执行间隔period,如firstTime=2015-3-25 9:00:00,period=24小时,若程序启动时,已经超过firs ...

  10. AtCoder Grand Contest 014 D:Black and White Tree

    题目传送门:https://agc014.contest.atcoder.jp/tasks/agc014_d 题目翻译 给你一棵树,每次任选一个点染色,先手染白色,后手染黑色.如果最后存在一个白色的点 ...