共计 1548 个字符,预计需要花费 4 分钟才能阅读完成。
1、在 public 文件夹下创建多页面 html 模板
定义页面 id
2、在 src 下新建 page 文件夹,分别定义各页面的入口文件和挂载模板
注意 id 要和 first.html 中的 id 对应
<!-- pages/first/first.vue -->
<template>
<div id="first">
FirstPage
<router-link to="/firstview">to firstview</router-link>|
<router-link to="/">to firstHomePage</router-link>|
<a href="second">to secondHomePage</a>|
<a href="second/secondview">to secondview</a>
<router-view />
</div>
</template>
<script>
export default {
name: "first",
methods: {}};
</script>
<style lang="scss">
</style>
/* pages/first/first.js*/
import Vue from "vue";
import First from "./first.vue";
import router from "../../router/first";
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(First),
}).$mount("#first");
router 文件分别定义各页面路由
这里我用的是哈希模式的路由,为了页面子下的路由跳转看起来更清晰,你也可以设置为 history 模式,配置父路由实现同样的效果,需要注意的是页面级的跳转需要用到 a 标签
/* router/first.js*/
import Vue from "vue";
import VueRouter from "vue-router";
import first from '../pages/first/first';
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "firstView",
component: first
},
{
path: "/firstview",
name: "firstView",
component: () => import(`../views/firstView.vue`),
},
];
const router = new VueRouter({
// mode: "history",
base: process.env.BASE_URL,
routes,
});
export default router;
3、在 vue.config.js pages 下面中定义多页面,分别配置各页面的入口文件 entry
、模板页面 template
,定义打包后的 html 名称 filename
、页面 titile
/* vue.config.js*/
module.exports = {
pages: {
first: {
entry: "src/pages/first/first.js",
template: "public/first.html",
filename: "first.html",
title: "firstPage",
},
second: {
template: "public/second.html",
entry: "src/pages/second/second.js",
filename: "second.html",
title: "secondPage",
},
},
};
整个项目放在 https://github.com/JoyZ1122/v… multipage 分支 后续会在各分支下加入服务端渲染 SSR 配置 cli2 多页面配置
正文完