Vue3.0由单页面应用改为多页面开发

<template>
    <div>
        我的home 页面
        <a href="about.html">abc</a>
    </div>
</template>

<script>
    export default {
        name: "Home"
    }
</script>


<style lang="stylus" rel="stylesheet/stylus">

</style>

import Vue from 'vue'
import Home from './App'
import router from './router'
import '@/plugins/element.js'


// 阻止启动生产消息，常用作指令
Vue.config.productionTip = false


new Vue({
    router,
    render: h => h(Home)


}).$mount('#home')

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)


export default  new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes:[


    ]
})

module.exports = {
    pages: {
        index: {
            entry: 'src/views/home/index.js', // 指定你刚才创建的index.js位置
            template: 'public/index.html',    // 主的htmml页面位置
            filename: 'index.html',
            title: 'home Page'
        }
    }
};

<template>
    <div>
        我的about页面
        <el-button type="primary" @click="goMain"> main</el-button>
        <el-button type="primary" @click="goPage1"> Page1</el-button>
        <el-button type="primary" @click="goPage2"> Page2</el-button>
        <router-view></router-view>
    </div>
</template>


<script>
    export default {
        name: "App.vue",
        methods:{
            goMain(){
                this.$router.push("/")
            },
            goPage1(){
                this.$router.push("/page1")
            },
            goPage2(){
                this.$router.push("/page2")
            }
        }
    }
</script>


<style lang="stylus" rel="stylesheet/stylus">

</style>

import Vue from 'vue'
import About from './App'
import router from './router'
import '@/plugins/element.js'


// 阻止启动生产消息，常用作指令
Vue.config.productionTip = false


new Vue({
    router,
    render: h => h(About)


}).$mount('#about')

import Vue from 'vue'
import Router from 'vue-router'
const main1 = () =>import('./page/main1.vue');
const page1 = () =>import('./page/page1.vue');
const page2 = () =>import('./page/page2.vue');


Vue.use(Router)


export default  new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes:[
        {
            path:"/",
            name: 'page1',
            component: main1
        },
        {
            path:"/page1",
            name: 'page1',
            component: page1
        },
        {
            path:"/page2",
            name: 'page2',
            component: page2
        }
    ]
})