第6.1.3 vue动态路由初探

从老A / AG-Admin这个里面，老A用的是
vue-element-admin的后台框架
我看到的动态路由的写法，但是我自己亲自尝试，连一个登陆页面也出不来。
在Vue2项目构建心得，我也看到了同样的构建方法
懒加载的目的不言而喻

先看看_import_development.js中的内容

module.exports = file => require('@/views/' + file + '.vue')

相当于

module.exports = function(file){
	return require('@/views/' + file + '.vue');
}

再看看_import_production.js中的内容

module.exports = file => () => import('@/views/' + file + '.vue')

初看这两段代码，看不懂是啥意思
1 箭头函数
可以参考ES6中的箭头函数的定义和调用方式，很容易理解他是做什么的，只要多加练习就可以了。就是一个输入、输出，还是比较简单
2 module.exports
一般导出一个属性或者对象用 export default
一般导出模块或者说文件使用 module.exports，这里是加载文件，所以用 module.exports
配置完毕后，页面没有能加载成功模板，而且还有这样的错误
Failed to mount component: template or render function not defined.

从一个奇怪的错误出发理解 Vue 基本概念，这篇文章给的解决办法是webpack 配置中的 resolve 属性对象中添加如下 alias 设置。但是这个版本应该比较低，新版本不是这么解决的。

module.exports = {
  // ... other options
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  // ... other options
}

vue2: template or render function not defined(试过很多办法了)，这篇文章提到

补充一下，我猜是vue-loader升级到了13.0导致的
vue-loader13.0有一个变更就是默认启用了esModule
相关信息可参考这里

我核对后，确实我的vue-loader版本与老A / AG-Admin版本不一样,我的是"vue-loader": "^13.3.0",但是vue-element-admin的版本是13.5.0，看来问题也不在此.最后找到问题所在了
vue-loader在13.0.0+的版本，_import_development.js写法有所不同

module.exports = file => require('@/views/' + file + '.vue').default

如此界面终于出来了。
3 路由是如何加载进去的
先看vue的入口程序main.js，引用了连个js

router.js,这里面做了简单的路由，参数基本上都是path加组件的模式，但是login的路由有点区别，增加了query参数。query其实是url中的参数部分，参考URL的各个组成部分详解，service是自定义的参数，这里没有值，因为这里是门户系统。

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/views/index/index'
import Login from '@/views/login/login'
import Logout from '@/views/login/logout'
Vue.use(Router)

export default new Router({
  mode: 'history',
  base: '/580-portal',
  routes: [
    {
      path: '/login',
      component: Login,
      query: {
        service: ''
      }
    },
    {
      path: '/index',
      name: 'index',
      component: Index
    },
    {
      path: '/logout',
      name: 'logout',
      component: Logout
    }
  ]
})

permission.js是在路由转换时，判断用户的认证状态的，详细参见第5.1.4 SpringCloud JWT
4 登录的时候做了什么
通过调试，可以看到,输入完账号、密码、验证码后后，发现跳转的路径是index

为什么是index呢，再看看登录的代码，从下面可以看出登录成功后，路由将index写入进去了

5 路由传参
vue的页面代码如下，所需要注意的是路由传参是用this.$router.push({ name: '',params:{} })，不是
this.$router.push({ path: '',query:{} })

handleAdd() {
		    	this.$router.push({ name: 'mpBlogArticleForm',params:{action:'add'} })
		    },
			handleUpdate(row) {
				edit(row.id).then(response => {
					this.$router.push({ name: 'mpBlogArticleForm',params:{action:'edit'} ,query:{renderData:response}})
				})
			}

路由中的代码如下：

{
      path: 'mpBlogArticle/:action',
      component: () =>
        import('@/views/blog/mpBlogArticleForm'),
      name: 'mpBlogArticleForm',
      hidden: true,
      meta: {
        title: '写新文章',
        noCache: false
        // id: '3511f90dd15f47c6b2f29a58a5b18643'
      }
    }

5 页面跳转
5.1 router-link
router-link

<router-link to="/"><img alt="小狐仙" src="~@/assets/index/logo.png" /></router-link>

从官方摘下来的
比起写死的 会好一些，理由如下：

无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。
在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。
当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径) 了。
5.2 $router

this.$router.push({
                            path:'/find/sample'
                        })