vue.js之使用Vue CLI3開發多頁面應用-路由理解

測試項目有3塊路由，如下圖

 

 

 在src目錄下的router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        path: '/', name: 'Login', component: r => {
            require(['./components/Login'], r)
        }, meta: {title: 'Login'}
    }
    ,{
        path: '/HelloWorld', name: 'HelloWorld', component: r => {
            require(['./components/HelloWorld'], r)
        }, meta: {title: 'HelloWorld'}
    }
]

export default new VueRouter({
    routes: routes
})

src下的main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

Vue.use(require('vue-wechat-title'))

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

 src下的App.vue

<template>
  <div id="app"  v-wechat-title="$route.meta.title">
<!--        <HelloWorld msg="Welcome to Your Vue.js App"/>-->
      <router-view></router-view>
      </div>

</template>
<script src="/js/libs/layer/layer.js"></script>

<script>

// import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'app',
  components: {
    // HelloWorld
  }
  ,mounted() {
      this.init();
  }
   ,methods:{
        init:function(){
            layui.use('upload', function(){
                var upload = layui.upload;
                //執行實例
                var uploadInst = upload.render({
                    elem: '#test1' //綁定元素
                    ,url: '/upload/' //上傳接口
                    ,done: function(res){
                        //上傳完畢回調
                    }
                    ,error: function(){
                        //請求異常回調
                    }
                });
            });
        }
        ,loginV:function () {
            window.location.href="/console.html";
        }
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 其他兩塊跟這個類似，關鍵代碼在vue.config.js

module.exports = {
    pages: {
        // console: {
        //     // 應用入口配置，相當於單頁面應用的main.js，必需項
        //     entry: 'src/modules/console/console.js',
        //
        //     // 應用的模版，相當於單頁面應用的public/index.html，可選項，省略時默認與模塊名一致
        //     template: 'public/console.html',
        //
        //     // 編譯后在dist目錄的輸出文件名，可選項，省略時默認與模塊名一致
        //     filename: 'console.html',
        //
        //     // 標題，可選項，一般情況不使用，通常是在路由切換時設置title
        //     // 需要注意的是使用title屬性template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
        //     // title: 'console page',
        //
        //     // 包含的模塊，可選項
        //     chunks: ['console']
        // },
        // 只有entry屬性時，直接用字符串表示模塊入口
        console: 'src/modules/console/console.js'
        ,client: 'src/modules/client/client.js'
        ,index:"src/main.js"
    }
}

如果存在改文件，則訪問方式類似   url/client#/Index...，如下圖

 

 

 

 

 

 

在頁面中，我們的template 里仍然可以用 <router-view></router-view> 標簽去獲取路由對應的模塊

當然vue.config.js 還可以有其他設置，用到了再進行完善吧