讲解nginx-webpack-vue router history

视频可以去哔哩哔哩去看 UID99210573

history

const routers = [
    {
        path: "/user",
        component: "<div>user user user</div>"
    },
    {
        path: "/detail",
        component: "<div>detail detail detail</div>"
    },
    {
        path: "/list",
        component: "<div>list list list</div>"
    }
]

let li = document.querySelectorAll('.wraps div');
let text = document.querySelector('#text');
let forward = document.querySelector('#forward');
let back = document.querySelector('#back');


let data = routers.find(v=>v.path == location.pathname)
text.innerHTML = data ? data.component : ""

forward.onclick = function () {
    //前进
    history.forward()
}

back.onclick = function () {
    //  history.go(-2)   history.back()
    history.go(-1)
};

[...li].forEach((v, i) => {
    v.onclick = function () {
        //repaceState 没有历史记录   pushState保留历史记录
        history.pushState({ index: i }, null, routers[i].path)
        text.innerHTML = routers[i].component
    }
})

//监听 前进后退的
window.addEventListener('popstate', e => {
    console.log(e)
    text.innerHTML = routers[e.state.index].component
})

webpack

const path = require('path')
const htmlwebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
module.exports = {
    mode:"development",
    entry:path.resolve(__dirname,'./main.js'),
    output:{
       filename:'[hash].js',
       path:path.resolve(__dirname,'./dist')
    },
    stats:"none",
    devServer:{
       port:9000,
       hot:true
    },
    plugins:[
        new htmlwebpackPlugin({
            template:path.resolve(__dirname,'./index.html')
        }),
        new FriendlyErrorsWebpackPlugin({
            compilationSuccessInfo:{
                messages:['Your applyaction running here is:http://localhost:9000']
            }
        })
    ]
}