vue-多頁面

1. vue create xx
2. 修改目錄結構

		public
			|- index.html
			|- page1.html
			|- pageN.html
		src
			pages
				page1
				 	|- page1.js    ~~ main.js
				 	|- page1.vue   ~~ app.vue
				pageN
					|-.....
					|-.....
			assets
				多頁公共資源
			components
				page1-N  頁面會用到的通用組件

vue create后，創建pages文件夾，把main.js和app.vue分別改名為index.js和index.vue

在改名后的index.js內
import Vue from 'vue'
import Index from './Index.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(Index),
}).$mount('#Index')

在改名后的index.vue內
<template>
  <div id="Index">
    <AppHeader>首頁內容</AppHeader>
      <img alt="Vue logo" src="../../assets/logo.png">
      <h3>index內容</h3>
      <div class="bg">index內容</div>
    <AppFooter>首頁內容</AppFooter>
  </div>
</template>

<script>
import AppHeader from '../../components/AppHeader'
import AppFooter from '../../components/AppFooter'

export default {
  name: 'Index',
  components: {
    AppHeader,AppFooter
  }
}
</script>

<style>
.bg{background: forestgreen }
</style>

此時如果想新建一個並且搭建一個新的page2頁面，在pages文件夾內新建js和vue文件

在page2.js內
import Vue from 'vue'
import Page2 from './Page2.vue'
import router from './router'
Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(Page2)
}).$mount('#page2')

在page.vue文件內

<template>
    <div class="page2">
        <AppHeader></AppHeader>
        page2內容
        <app-footer></app-footer>
        <nav>
            <router-link to="/login">登錄</router-link>
        </nav>
        <router-view></router-view>
    </div>
</template>

<script>
import AppHeader from '../../components/AppHeader' 
import AppFooter from '../../components/AppFooter' 
export default {
    name:"page2",
    components:{
        AppHeader,AppFooter
    }
}
</script>

此時如果想page2搭建一個路由

然后在page2文件夾內新建router.js內
import Vue from 'vue'
import VueRouter from 'vue-router'
 //import router from './router';//page2 頁面內部路由
Vue.use(require('vue-wechat-title'));//單頁插件 覆蓋html/htmlWebpackPlugin.options.title配置,需要在template根元素下設置v-wechat-title="$route.meta.title"

Vue.use(VueRouter)

const routes = [
    { path: '/login', name: 'login', component: r => { require(['./login/Login'], r) }, meta: { title: 'page2 登錄' } }
]

export default new VueRouter({
    routes: routes,
    mode:'history'
})

公共組件放在compents內

還要新建一個vue.config.js內

module.exports = {
    pages: {
        index: {
            // 應用入口配置，相當於單頁面應用的main.js，必需項
            entry: 'src/pages/index/index.js',

            // 應用的模版，相當於單頁面應用的public/index.html，可選項，省略時默認與模塊名一致
            template: 'public/index.html',

            // npm run build 編譯后在dist目錄的輸出文件名，可選項，省略時默認與模塊名一致
            filename: 'index.html',

            // 標題，可選項，一般情況不使用，通常是在路由切換時設置title
            // 需要注意的是使用title屬性html文件 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'index page config',

            // 包含的模塊，可選項
            // chunks: ['index']
        },
        // 只有entry屬性時，直接用字符串表示模塊入口
        page1: {entry:'src/pages/page1/page1.js',title:'page1 config'},
        page2: {entry:'src/pages/page2/page2.js',title:'page2 config'},
        // page3: 'src/pages/page3/page3.js',
    }
}