V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
phpxiaowangzi
V2EX  ›  程序员

vue-cli4.5.11 实现多入口路由功能实现

  •  
  •   phpxiaowangzi · 2021-02-04 16:08:31 +08:00 · 1046 次点击
    这是一个创建于 1148 天前的主题,其中的信息可能已经有所发展或是发生改变。

    vue.config.js:

    module.exports = {
        pages:{
            supplier:{
                entry:'src/supplier/main.js',
                template:'public/supplier.html',
                filename:'supplier.html',
                title:'合作伙伴'
            },
            staff:{
                entry:'src/staff/main.js',
                template:'public/staff.html',
                filename:'staff.html',
                title:'员工助手'
            }
        }
    }
    

    main.js:

    import { createApp } from 'vue'
    import VueRouter from 'vue-router'
    import Supplier from './Supplier.vue'
    
    import MicroPay from './components/MicroPay/index.vue'
    
    const routes = [
        {path:'/MicroPay', component:MicroPay}
    ]
    
    const router = new VueRouter({
    	mode:'hash',
    	routes
    })
    
    createApp(Supplier).use(router).mount('#supplier')
    

    Supplier.vue:

    <template>
        <div id="supplier">
            <router-view></router-view>
        </div>
    </template>
    
    <script>
        export default {
            name: 'Supplier'
        }
    </script>
    

    components/MicroPay/index.vue:

    <template>
        <div>MicroPay</div>
    </template>
    
    <script>
        export default {
            name:'MicroPay'
        }
    </script>
    

    现在访问 http://localhost:8080/supplier#/MicroPay 空白无法显示 components/MicroPay/index.vue 文件内容,求教是否路由设置不正确,求前端大神指教。

    1 条回复    2021-02-05 11:45:16 +08:00
    PinkRabbit
        1
    PinkRabbit  
       2021-02-05 11:45:16 +08:00
    空白的时候,看下控制台有没有报什么错误呢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5375 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 09:12 · PVG 17:12 · LAX 02:12 · JFK 05:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.