去除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 = ...
随机推荐
- vue 升降排序
本实例是根据工作进度的百分比来进行排序. html <div class="ibox-content"> <li v-for="(rangeItem,i ...
- JAVA- JDBC之DBHelper
package com.myit.util; import java.lang.reflect.Field; import java.sql.Connection; import java.sql.D ...
- html中css的三种样式
在html中定义CSS样式的方法有三种,新建CSS文件 使用link 关联 这种是最常用的外部引用样式,第二种讲样式写在 head 头部里面 这种是页面样式 ,第三中样式直接写在行内 style里面 ...
- 搭建LoadRunner中的场景(三)场景的执行计划
所谓场景操作,包括初始化用户组.启动用户组各用户以及停止虚拟用户的全过程.依据设置不同,执行过程中可以最多有5类操作,分别是启动用户组(start group).初始化(Initialize).启动虚 ...
- YYYY-mm-dd HH:MM:SS 备忘录
d 月中的某一天.一位数的日期没有前导零. dd 月中的某一天.一位数的日期有一个前导零. ddd 周中某天的缩写名称,在 AbbreviatedDayNames 中定义. dddd 周中某天的完整名 ...
- bzoj3312
K个硬币,要买N个物品. 给定买的顺序,即按顺序必须是一路买过去,当选定买的东西物品序列后,付出钱后,货主是不会找零钱的.现希望买完所需要的东西后,留下的钱越多越好,如果不能完成购买任务,输出-1 $ ...
- 网络最大流dinic模板
#include<iostream> #include<cstdio> #include<cstring> #include<queue> using ...
- 批处理中格式化Date
@Echo Off Set _Date=%date% If "%_Date%A" LSS "A" (Set _NumTok=1-3) Else (Set _Nu ...
- win7-64 mysql的安装
1.https://jingyan.baidu.com/article/597035521d5de28fc00740e6.html 2.net start mysql 无法启动的3534的错误的解决办 ...
- web.xml中的<jsp-config>的用法详解
<jsp-config> 包括<taglib> 和<jsp-property-group> 两个子元素. 其中<taglib>元素在JSP 1.2时就已 ...