第6.1.3 vue动态路由初探

落日映苍穹つ 2022-05-28 03:13 182阅读 0赞

从[老A / AG-Admin][A _ AG-Admin]这个里面，老A用的是  
[vue-element-admin][]的后台框架  
我看到的动态路由的写法，但是我自己亲自尝试，连一个登陆页面也出不来。  
在[Vue2项目构建心得][Vue2]，我也看到了同样的构建方法  
懒加载的目的不言而喻  
![1][]  
先看看`_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中的箭头函数的定义和调用方式][ES6]，很容易理解他是做什么的，只要多加练习就可以了。  
**2 module.exports**  
一般导出一个属性或者对象用 export default  
一般导出模块或者说文件使用 module.exports，这里是加载文件，所以用 module.exports  
配置完毕后，页面没有能加载成功模板，而且还有这样的错误  
`Failed to mount component: template or render function not defined.`  
![2][]  
[从一个奇怪的错误出发理解 Vue 基本概念][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(试过很多办法了)][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  
![1][1 1]  
`router.js`,这里面做了简单的路由，参数基本上都是path加组件的模式，但是login的路由有点区别，增加了query参数。query其实是url中的参数部分，参考[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][5.1.4 SpringCloud JWT]  
**4 登录的时候做了什么**  
通过调试，可以看到,输入完账号、密码、验证码后后，发现跳转的路径是index  
![1][1 2]  
为什么是index呢，再看看登录的代码，从下面可以看出登录成功后，路由将`index`写入进去了  
![2][2 1]  
**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'
          }
        }

[A _ AG-Admin]: https://gitee.com/geek_qi/ace-security/tree/master
[vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin
[Vue2]: https://www.jianshu.com/p/87a4fe7bf0b1
[1]: /images/20220528/5e480c1c97624f23900cfe1a02551413.png
[ES6]: https://blog.csdn.net/itpinpai/article/details/52182093
[2]: /images/20220528/03776c28ffe54c1db12e0c5bebbd1731.png
[Vue]: https://blog.csdn.net/csdn_yudong/article/details/59109902
[vue2_ template or render function not defined]: https://segmentfault.com/q/1010000011071945/a-1020000011075220
[1 1]: /images/20220528/8b7f8091de334ef49d4a792771c00e2a.png
[URL]: https://blog.csdn.net/no_loafer/article/details/71486654
[5.1.4 SpringCloud JWT]: https://blog.csdn.net/warrah/article/details/82757383
[1 2]: /images/20220528/4533596114cc4424a116e34ac6d05a2d.png
[2 1]: /images/20220528/1a5e416f21d341abacd1c1575fcb9e75.png