去除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)

})

猜你喜欢

转载自www.cnblogs.com/DZzzz/p/8964414.html