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 还可以有其他设置，用到了再进行完善吧