第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 optionsresolve: {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'})

第6.1.3 vue动态路由初探相关推荐

ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
Vue动态路由的前端实现
1. 需求描述最近开发的一个项目,涉及到这样一个需求:随着项目的不断推进,后台管理功能逐渐增多,与此同时,静态路由表也逐渐扩大,需要把静态路由方式转换为动态路由方式.要完成这样一个转换,有几个技术要 ...
Vue动态路由传参和监听路由
Vue动态路由传参 query传参 params传参 //定义Detail路由 {path: '/detail/:id',name: 'Detail'component: () => impor ...
Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制
思路: 动态路由实现:在导航守卫中判断用户是否有用户信息,通过调用接口,拿到后台根据用户角色生成的菜单树,格式化菜单树结构信息并递归生成层级路由表并使用Vuex保存,通过 router.addRout ...
vue动态路由变化页面不重新加载问题，实现方式比较简单，就是有点鸡贼
由于使用了动态路由,有时候页面需根据路由来动态变化,整个页面需要重新加载,但是地址指向同一个,这边用了一个比较取巧的方式将整个页面封装成一个子组件 children => formTe,参数可 ...
seo vue 动态路由_基于Vue SEO的四种方案
前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SSR和静态化基于Nuxt.js来说. 关于服务器渲染:,对Vue版本有要求, ...
vue动态路由添加，vue-router的addRoute方法实现权限控制，添加根路由和子路由
addRoute 路由分为静态路由和动态路由静态路由和动态路由的优缺点动态路由实现思路: 动态路由遇到的问题与解决方式动态添加子路由路由分为静态路由和动态路由静态路由和动态路由的优缺点 1. ...
vue动态路由权限管理
通常我们在vue项目中都是前端配置好路由的,但在一些项目中我们可能会遇到权限控制,这样我们就涉及到动态路由的设置了. 动态路由设置一般有两种: (1).简单的角色路由设置:比如只涉及到管理员和普通用户 ...
vue动态路由配置，通过路由区分模块化打包配置
import Vue from 'vue'; import Router from 'vue-router'; import config from '@/config';Vue.use(Router ...

第6.1.3 vue动态路由初探

第6.1.3 vue动态路由初探相关推荐

最新文章

热门文章