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)
    
    })
  • 相关阅读:
    Oracle-11g ASM Fast Mirror Resync特性
    Oracle
    Oracle-19C中的DML重定向(DML Redirection)
    Oracle-重建oraInventory仓库
    Oracle-输出存储在ASM中当前数据库客户端未打开的文件列表
    Oracle-19c特性之刷新数据库缓存中的密码文件信息
    Oracle-DG环境进行failover故障演练
    Oracle-switchover转换DG角色
    论衡中校长郗会锁儿子高考移民西藏事件反映出的诸多问题
    退役后记:春夏篇
  • 原文地址:https://www.cnblogs.com/DZzzz/p/8964414.html
Copyright © 2011-2022 走看看