zoukankan      html  css  js  c++  java
  • 去除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)
    
    })
  • 相关阅读:
    读《阿里云是如何失控的》有感
    LeetCode Search in Rotated Sorted Array 在旋转了的数组中查找
    界面编程模仿篇(QQ登录界面逼真篇)
    最牛B的编码套路
    QinQ封装及终结详解
    seaJs学习笔记之javascript的依赖问题
    Deploy maven on Linux OS
    c++——inline内联函数
    c++——引用
    c++——const关键字
  • 原文地址:https://www.cnblogs.com/DZzzz/p/8964414.html
Copyright © 2011-2022 走看看