❶ vue路由router,routes,route
SEO：搜索引擎优化，
前端路由：控制页面访问路径，单页面应用
后端路由：控制接口
1，URL的hash,location.hash
2,HTML5的history模式，history.pushState(data,title,url)
使用vue create '文件名'，创建一个vue脚手架，
vue.use(VueRouter),调用vue-router这个对象上面的install方法，注册两个属性在vue原型对象上，分别是vue.prototype.$router(整个项目的路由对象)和vue.prototype.$route(当前活跃的路由对象)
实例化一个VueRouter对象
router-link相当于a标签，跳转页面。router-view相当于一个占位符，把现在页面访问的路腔兆径内容加载进来，替换掉router-view
vueRouter跳转页面的方式有用this.$router.push('/home')，this.$router.replace()和用标签<router-lin>
this.$router.push('/home?key='+vaule+'&key1='+vaule1)。在另一个页面用this.$route.query获取传过汪前来的值
第一种
父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
接收参数
第二种
父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
接收参数都是一样
第三种
在路由规则里定义如下
pid是一个变量，在用这个动态路由的时候可以
懒加载是当你点击一个页面时，先缓存所有的链接，不执行，只执行那个困圆清页面的资源，这样可以提升效率，提高响应速度。
路由懒加载很简单，在component用import引入组件，如下：
router相当于一个路由器，路由器里面有路由表，既routes，表中很多路由规则，route是routes的一个个路由规则
❷ vue-router路由切换数据加载中效果是怎么实现的
一个方案就是利用 vue-router 导航钩子 导航钩子 · GitBook ，步骤如下：
1. 可以在vuex 或者 bus 中维护一个isLoading 的变伍闭歼量
2. 在 router.beforeEach 钩子中 设置 isLoading = true , 在 router.afterEach 中 设置 isLoading = false
3. 在根组件（即<router-view>所在的父组件）上 放置一个Loading组件，例如：
<Loading :isLoading="isLoading"></Loading>
<router-view ></router-view>
这个 Loading组件根腔冲据这个isLoading值来决定态袭是否显示loading动画。
❸ Vue 项目部署到centos7服务器后，静态资源路由加载问题
在dist目录下的static静态资源，通过路由访问时，会多出一个路由在静态资源前面，如：
ip:8080/Test/static/one.js
Test路由的圆银哗存在导致 one.js报404问题；
项目在构建dist时，路由配置的问题，找到Vue项目下
/src/router/index.js文件，
更改橘行为如图方式：搏前
重新 npm run build，将dist替换到服务器上，重新构建docker镜像及启动容器即可
❹ vue路由多个子路由页面加载多次
响应路由参数的颤棚基变化，有三个菜单只有参数不同，但使用的同一个组件页面，配置路茄谨由时指向了和罩不同三个路由。但切换菜单时，页面不刷新，导致路由多个子路由页面加载多次。
❺ vue-router，路由按需加载，页面加载完成后，this.$route 获取不到
1.问题描述
页面中需要路由匹配给当前路由高亮，所以就需要获取当前路由的path，但是发现获取不到
在 mounted 中打印 $route：
获取到的值不对。path 和 fullPath ，明明应该有值，但只有一个 "/" 。
可能在 mounted 中router 的初始化还没有完成，所拍乎旦以取到的是一个初始默认值。
加一个延时试试：
可以发现，有时能获取到，有时获取不到，延时到2000以后，目前测试的是都能获取到。
问题推测：
vue-router 初始化是需要一段时间的，在完成之前，取值只能拿到初始的默袭扰认值。
在 mounted 中 router 初始化可能还没有完成。
2.用onReady解决
上面用定时器延迟了1000ms，有时能取到 router，于是顷没加长延时时间到2000解决，但是，真正要解决这个问题，肯定不能用定时器，因为延迟的时间无法确定：
长了，影响体验
短了，可能router初始化还没完成
查阅官网API，希望官方提供了 初始化完成时的回调方法 ，果然找到了： onReady
经测试，通过。
❻ Vue项目启动加载逻辑介绍
下面说下Vue项目启动的加载逻辑：
首先前端项目默认入口都是index.html
这里有个DIV的id为app，这里是vue的挂载点，后续views中的 .vue文件都会挂载在这里。
程序运行index.html后会寻找用到app的文件，即main.js
这里创建了一个vue实例，挂载了#app，也就是index.html中的id为app的液薯div元素，接着加载App.vue中的页面
打开App.vue文件，查看配置有router-link和router-view
router-link 定义点击后导航到哪个路径下
router-view 会动态的把对应的组件内容渲染到router-view中
上面router-view中加载的内容有路由决定，于是再到路由文件查看此路由定义
路由配置文件中如图所示两种芦埋昌方式都可以实现。
接下来加载的就是具体的功能模块了
例如在Home.vue这个模块中又引入了HelloWorld.vue公共组件模块
关联了该组件，也会加载进去
项目运行起来后，会先去找入口文件index.html，在index.html中找到其实例需要挂载的位置，然后找到main.js中实例创建的地方，去加载组件中的模板，然后通过模板中的router-view，得知需要去查找路由，找到后加载对应的模板，如果陪扒模板中引用了公共的模板再加载公共模板进来，最后把处理后的这些呈现到浏览器中。
❼ 前端使用@vue/[email protected]打包，路由懒加载vue文件打包缺失，年初2月份的时候还能正常打包
不要 使用3.5以上的版本 很容易出现问题
你应该 使用稳定版
给你个 建议 更换版本
❽ vue路由懒加载为什么还是好多js
系统bug，网络问题。
1、系统bug是vue路由懒软件携耐系统出现了手做问题，导致加载显示好多js，等待官方修复即可。
2、网络问题是自身设备连接的网络出现较大波动，导辩薯春致vue路由懒加载还是好多js，更换网络重新打开即可。
❾ Vue实现动态路由
通常我们在vue项目中都是前端配置好路由的，但在一些项目中我们可能会遇到权限控制，这样我们就涉及到 动态路由 的设置了。
动态路由设置一般有两种 ：
(1)、简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置
(2)、复杂的路由权限设置：比如OA系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用
到这里，整个动态路由就可以走通了，但是页面跳转、路由守卫处理是异步的，会存在动态路由添加后跳转的是空白页面，这是因为路由在执行next()时，router里面的数据还不存在，此时，你可以通过window.location.reload()来刷新路由
后端返回的路由格式：
注意： vue是单页面应用程序，所以页面一刷新数据部分数据也会跟着丢失，所以我们需要将store中的数据存储到本地，才能保证路由不丢失。关于vue页面刷新保存页面状态，可以查看 vue如何在页面刷新时保留状态信息