webpack + js如何原生实现二级路由

Question

接手了一个小项目，想着就不用vue了，自己用webpack搭起来了小项目。
刚开始页面量不多我也没做过多考虑，后来页面变多了，明显得有了一级路由和二级路由的需求。
因为平时都用vue，如何实现二级路由实在不清楚。
求教各位前辈如何用js简单得实现二级路由。

const htmlWebpackPlugin = require("html-webpack-plugin")
const extractTextWebpackPlugin = require("extract-text-webpack-plugin")
const path = require('path')

// 自己项目要用到的模板名
const pages = [
    {name: 'index'},
    {name: 'collections'},
    {name: 'projects'},
    {name: 'page4'},
    {name: 'page5'},
    {name: 'page6'},
    {name: 'page7'},
    {name: 'page8'},
    {name: 'page9'},
    {name: 'page10'},
    {name: 'page11'}
]

// 配置webpack入口
const entry = path.join(__dirname, "/src/main.js")

// 配置webpack打包文件位置
const output = {
    path: path.join(__dirname, "/public"),
    filename: "[name].js"
}

// 配置服务器
const devServer = {
    contentBase: path.join(__dirname, "/public"),
    historyApiFallback: true,
    inline: true
}

const _module = {
    rules: [
        {
            test: /\.html$/,
            use: {
                loader: "html-loader"
            }
        },
        {
            test: /(\.jsx|\.js)$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            },
        },
        {
            test: /(\.jpg|\.png|\.gif|.jpeg)$/,
            use: [
                {
                    loader: "url-loader",
                    options: {
                        limit: 12000,
                        outputPath: 'images',
                        name: '[name].[hash].[ext]'
                    }
                }
            ]
        },
        {
            test: /\.scss$/,
            use: extractTextWebpackPlugin.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            })
        },
        {
            test: /\.(otf)|(woff)|(eot)|(ttf)$/,
            use: [
                {
                    loader: "url-loader",
                    options: {
                        limit: 100000,
                        name: "[hash:8].[name].[ext]",
                        outputPath: 'images'
                    }
                }
            ]
        }
    ]
}

// 定义插件
const plugins = pages.map(({name}) => new htmlWebpackPlugin({
    filename: path.join(__dirname, `/public/${name}.html`),
    template: path.join(__dirname, `/src/template/${name}.temp.html`)
}))
plugins.push(new extractTextWebpackPlugin("styles.css"))

module.exports = {
    entry,
    output,
    devServer,
    module: _module,
    plugins
}

webpack打包出来的资源目录是这样的

Answer 1

既然有前端路由了，那大概率是单页应用，你首先得解决页面模块替换的问题。

然后就简单了，利用history或者hash来实现路由。点击链接，更换url，替换对应模块。

一级二级一个道理