vue项目中去除#号后相关联的问题

vue项目中去除#号后相关联的问题

1、路由去#号：

在router文件夹下的index.js中：
const router = new VueRouter({
  base: process.env.BASE_URL,
  routes,
  mode:'history',
});

2、文件打包时，设置vue.config.js文件或者config文件下的index.js文件

const  CopyWebpackPlugin  =  require('copy-webpack-plugin');
const  HtmlWebpackPlugin  =  require('html-webpack-plugin')
const webpack = require('webpack')
const  path  =  require('path');

function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports  =   {
    transpileDependencies: ["*"],//配置依赖转化，可定制配置
    publicPath: '/', //基本路径  ---history模式时去掉.,hash模式时是 ./
    outputDir: 'dist', //输出文件目录
    lintOnSave: false,
    assetsDir: 'static', //css js 等静态文件目录
    productionSourceMap:  false, //生产环境的 source map，默认true
    lintOnSave: false, //关闭eslint语法检查
    devServer:  {
        host: '0.0.0.0',
        port: 9527,
        hot: true,
        open: true,
        watchContentBase: true,
        proxy:  { 
            '/api':  {     
                target: process.env.VUE_APP_URL, //代理地址
                     ws:  true, //允许代理 websockets 协议
                     changeOrigin:  true   //需要虚拟托管的站点要设计为true。建议设为 true，开发时大部分情况都是虚拟托管的站点
                     
            } 
        }
    },
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                path.resolve(__dirname, './src/assets/common.less')
            ]
        }
    },
    chainWebpack:  config  =>  {
        config.resolve.alias.set('@',  resolve('src'))
        config.entry.app = ["babel-polyfill", "./src/main.js"];
    },
    configureWebpack: {
        //支持jquery
        plugins: [
            new webpack.ProvidePlugin({
                $:"jquery",
                jQuery:"jquery",
                "windows.jQuery":"jquery"
            })
        ]
    }
}

3、修改路由页面跳转模式

都改成：

toFreeBack(num){
    this.$router.push({ name:'feedback', query:{type: num}})
},

4、分享链接跳转时，修改获取路由路径的方法，以便获取到正确的地址

在APP.vue中

created(){
    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
        //路由hash模式时：
        let path = window.location.hash.split('?')[0]
        let id = window.location.hash.split('=')[1]
        
        //路由history模式时：
        let path = window.location.pathname
        let id = window.location.href.split('=')[1]
        
        let toUrl = ''
        switch (path){
            case '/msgDet': toUrl = '/pages/info/details'
            break;
            case '/curriculumDetail/audioDetail': toUrl = '/pages/resource/audioDet'
            break;
            case '/curriculumDetail': toUrl = '/pages/resource/courseDet'
            break;
            case '/bookDetail': toUrl = '/pages/resource/bookDet'
            break;
            default: toUrl=''
            break;
        }
        if(toUrl == ''){
            window.location.href = this.CODE_URL + '/h5'
        }else{
            window.location.href = this.CODE_URL + '/h5' +　toUrl + '?id=' + id
        }
    }
    let newTime = Date.parse(new Date())
    if(localStorage.getItem('X-Token') && !localStorage.getItem('expiresTime') || localStorage.getItem('expiresTime') && newTime>localStorage.getItem('expiresTime')){
         localStorage.removeItem('X-Token')
         localStorage.removeItem('expiresTime')
    }
},

5、对应后台预览的事件，跳转链接，应将#号字符去掉

6、前台对应的地址链接也应均去掉#号