去除vue路由跳转地址栏后的哈希值#
去除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路由跳转地址栏后的哈希值#的更多相关文章
- Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决
今天碰到一个问题 vue路由跳转到新的页面时会直接显示页面最底部 正常情况下是显示的最顶部的 而且好多路由中不是全部都是这种情况 折腾好长时间也没解决 最后在网上找到了解决办法 其实原理很 ...
- vue路由跳转的方式
vue路由跳转有四种方式 1. router-link 2. this.$router.push() (函数里面调用) 3. this.$router.replace() (用法同push) 4. t ...
- 详解vue 路由跳转四种方式 (带参数)
详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1. router-link ? 1 2 3 4 5 6 7 8 9 10 ...
- vue路由跳转报错解决
vue路由跳转: setTimeout(function () { console.log(this); this.$router.push("/login"); },800) 语 ...
- vue路由跳转取消上个页面的请求和去掉重复请求
vue路由跳转取消上个页面的请求和去掉重复请求 axios 的二次封装(拦截重复请求.异常统一处理) axios里面拦截重复请求
- vue路由跳转时判断用户是否登录功能
通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以 ...
- Vue路由跳转时显示空白页面,iview的使用
最近在用iview做项目,需要实现登录,注册,忘记密码等功能.iview-admin本来就有登录功能,于是想照葫芦画瓢,实现登录界面的注册,忘记密码页面路由跳转. router.js里路由配置,刚开始 ...
- vue路由跳转传参的两种方法
路由跳转: this.$router.push({ name: '工单列表', params: {p_camera_dev_name: 'xxx'} }); 使二级菜单呈点击状态: $('[index ...
- vue 路由跳转前确认框,刷新浏览器页面前提示确认框
先看效果图: 1.刷新页面效果: 2.跳转路由(进入别的页面前)效果: 代码: // 路由跳转确认 beforeRouteLeave(to, from, next) { const answer = ...
随机推荐
- JAVA- 成员变量与局部变量的区别
成员变量与局部变量的区别 成员变量是定义在方法之外,类之内的局部变量是定义在方法之内的. 作用上的区别: 1.成员变量的作用是用于描述一类事物的公共属性的. 2.局部变量的作用就是提供一个变量给方法内 ...
- Android SDK离线安装方法详解(加速安装)
AndroidSDK在国内下载一直很慢··有时候通宵都下不了一点点,最后只有选择离线安装,现在发出离线安装地址和方法,希望对大家有帮助 一,首先下载SDK的安装包,android-sdk_r10-wi ...
- 2017 google IO大会——5.17
大家好! 每年一度的全球互联网及新型技术的盛会 Google IO,今年的大会日期和地址已经公布了:大会将在5月17至19日在谷歌公司总部边上的会场,美国加州 Mountain View的 Shore ...
- SpringBoot_00_资源汇总贴
一.精选 1.Spring Boot文档 二.参考资料 1.springboot-learning-example 2.Spring boot 那些事 3.Spring Boot干货系列 4.Spri ...
- Python IOError: [Errno 13] Permission denied:
一般是代码写错了,比如我遇到的问题就是由于 os.listdir() 传参传错导致的. 本应该传入字符串路径名,但传入了一个文件对象(object)
- kettle监控销售人员当月每天任务完成率_20161107周一
1.上面是目标表,其中激活客户数为当月每天之前30天未下单的客户 2.写SQL SELECT a.销售员,c.当月销售确认额,a.当月订单额,b.当月首单数,b.当月激活数, a1,b.b1,b.c1 ...
- 一次LVS+MySQL的主主负载均衡实战
这是去年做的一个项目的记录,如果大家有更好的解决方案,欢迎指出. 先说说项目需求,用户需要在两个地市部署两套应用系统和两套数据库,在一个地市主用,在另一个热备:数据要互备:而且如果主用地市流量很大,可 ...
- MySQL锁之一:锁详解
一. 什么是死锁 死锁是指两个或两个以上的进程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下去.此时称系统处于死锁状态或系统产生了死锁,这些永远在互相等的进 ...
- typedef 函数指针的用法
转自:http://www.cnblogs.com/shenlian/archive/2011/05/21/2053149.html typedef 函数指针的用法 在网上搜索函数指针,看到一个例子. ...
- [poj3107/poj2378]Godfather/Tree Cutting树形dp
题意:求树的重心(删除该点后子树最大的最小) 解题关键:想树的结构,删去某个点后只剩下它的子树和原树-此树所形成的数,然后第一次dp求每个子树的节点个数,第二次dp求解答案即可. 此题一开始一直T,后 ...