vue路由使用
路由器是网络连接的基础，如果您想让您的网络连接更加畅通无阻，本文vue路由使用将为您提供实用的路由器指南和使用技巧。
本文内容目录一览：
Vue路由属性的使用
router-link 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默没敬认渲染成带有正确链接的 枯察慎a 标签，可以通过配置 tag 属没丛性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。
以下两种实现方式得到的效果一样
一、
a href="#/login"登陆/a
a href="#/register"注册/a
二、
router-link to="/login"登陆/router-link
router-link to="/register"注册/router-link
router-link默认渲染为一个a标签
假如我们想把router-link渲染成其他标签，可修改其属性tag，如：
router-link to="/login" tag=“span”登陆/router-link
router-link to="/register"注册/router-link
Vue路由的使用
路由允许我们通过不同的URL去访问不同的内容，该URL可以是我们自己设置的，在项目中并没有这样的文件夹，这种功能就是路由
路由的本质是hash值
定：定义路由组件
配：配置路由
实：实例化路由
挂：挂载路由
路由（vue-router）的基本作用就是将每个路径映射到对应的组件，通过修改路由进行组件之间的转换
常规路径规则为在当前路径后面加上"/path"，path即为设定的前端路由路径
跳转到上一次的页面：this.$router.go(-1);
指定跳桐迅转的地址：this.$router.replace("/path");
指定跳转的路由名字下：this.$router.replace({name:"menuLink"});
通过push进行跳转:this.$router.push("/path");
或this.$router.push({name:"path"});
（1）设置一个默认展示组件，（不推荐！！！哪清）
{path:"/",component:login}
(2) 路由redirect重定向，设置默认组件
{path:"/",redirect:"login"}
（1）创建一个路由对象，当导入vue-router包之后，在window全局对象之中就有一个路由的构造函数VueRouter
（2）在new路由对象的时候可以传递一个配置对象李轮前，这个配置对象的route表示路由器的匹配规则
（3）每个路由规则都是一个对象，这个规则对象身上必须有两个属性
属性1：path表示监听那个路由的链接地址
属性2：component表示如果路由是前面匹配到的path，则展示component属性对应的组件，
component属性值必须是一个组件模板对象，不能是组件的引用名称
（4）router：routerObj将路由规则对象，注册到VM实例上，用来监听URL地址的变化，然后展示对应的组件
（5）使用vue官方提供的router-link元素使用它，默认渲染成一个a标签，router-link to="login"登录/router-link
（6）在控制的div中（App.Vue）使用router-view/router-view
vue 动态路由/路由权限 解决方案
路由权限思路：
1.菜单栏/导航栏(一级权限)
在登录成功后，获取后端的权限数据, 根据铅扮权限数据，展示对应的路由导航或菜单即可;
2.界面的控制
如果用户没有登录, 用户手动在地址栏输入路由地址，则需要跳转到登录界面.
如果用户已经登录, 用户手动输入的非权限内的路由地址，则给他跳转到404界面.
3.按钮的搭游控制(二级权限)
在页面中，有些账号有: 添加，删除，修改，增加等权限, 有些没有.
没有权限的账号在这个页面只是可以浏览页面中的数据，需要对这些按钮 禁用or隐藏。
4.请求和响应的控制 （这一步其实后端也会根据token判断身份信息, 来返回数据，可以省略）
如果用户通过非常规的手段(可能是同行), 比如通过浏览器f12将禁用的按钮disabled 改成false, 隐藏的按钮apacity:0改成了1，这些按钮就可以使用了，此时需要对按钮点击后发出的请求作出拦截.
login.vue
home.vue (elment-ui)
侧边导航栏
store.js
router.js
动态路需知激销两个地方调用:
1 login.vue 中登录成功后立即执行动态路由函数
2 app.vue中, 在根组件中添加执行动态路由函数，这样每一次用户刷新，就会执行，否则刷新之后，动态路由就没了
思路3：按钮的控制(二级权限): 这里我是通过 自定义指令来实现 对按钮(增,删,改等二级权限按钮) 的显示隐藏。
更简单直接的方式，直接就在html中对button添加v-if显示隐藏即可
import './utils/permission.js' -- main.js中引入文件, 嫌麻烦直接在main.js中写
4 服务器返回状态码401, 代表token超时 or token被串改 or 未传token, 此时强制跳转到登录页重新登录
vue路由（一、二级路由）
是前台为了者吵实现单页面应用然后设置路径，根据不同的路径显示不同页面。但是这些路径在服务器上不是真是存在的
hash路由 默认的是hash路由
history路由
通过onhashchange()来检测路由的变化,根据不同的hash来显示不同元素。获取当前的hash值location.hash
通过onpopstate来检测history堆栈路径的变化，堆栈的路径是通过history.pushState(null, '',"?page=2")添加进去的
由hash路由设置成history路由，给路由添加配置项 mode="history"
1、设置相应组件
2、在router-index.js文件中添加配置
首先引入组件，然后配置规则 {path:设置路径，name:名，component:组件}
3、在需要现在组件的地方给页面添加router-view/router-view
4、设置导航路径
使用vue提供 router-link to="路径"/router-link 默认的解析成a标签
5、设置默认路由
6、设置导航样式
1、需要定义组件
2、确晌庆定好在那个组件配置二级路由，就去那个组件的配置规则中添加children关键字，按照一级路由的配置方法配置规则
3、在需要配置二级路由的组件中添加router-view
4、设置导航 router-link to="/ / "
5、设置导航链接的样式
我们可以定义一个一级路由，里面可以包裹底部footer组件，让他宴嫌握为二级路由，这时点击底部的二级路由时，就会切换不同的页面，而不需要底部组件显示的时候，那我们在配置一个一级路由就好了！！！
vue中路由模式及区别
路由模式默认三种
1.Hash: 使则察用URL的hash值来作为路由。支持所有浏览器。
2.History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式
3.Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。
Hash和History两种路由模式的区别
最明显的区别就是在地址栏中的#号，history模式下#会消失，hash不会。
相同点:
1.当URL改变时，页面不会重新加载;
2.都受页面导航回退前进等影响;
不同点:
1.hash模式背后的原孙塌茄理是onhashchange事件，可以在window对象上监听事件。
2.如果后台没有做相应配置,history页面会在再次刷新的时候,报404;hash则不会出现404报错
3.当改变url时，hash不会请求服务器，history会请求服务器。
当使用vue路衫漏由模式history时，进行刷新报错404，解决办法？
1.与后端配合，再刷新时返回首页
2.在Vue应用里面写出一个覆盖全局的方法和一个404页面。
原文链接：
路由器和WIFI设置需要小心操作和谨慎处理，因为错误的设置可能会导致您的网络运行不稳定或者面临安全问题。
