vue框架里的路由配置
路由器设置和无线WIFI设置可能需要您进行一些高级设置和配置，本文vue框架里的路由配置将为您提供详细的操作步骤和技巧。
本文内容目录一览：
- 1、Vue 路由和Http
- 2、vue3.0设置路由是修改那个文件
- 3、Vue-cli-4-路由配置文件，路由进阶，二级路由
- 4、vue路由配置
- 5、vue项目中关于路由的配置
- 6、vue项目 动态路由怎么做
Vue 路由和Http
命令行中输入 npm install vue-router --save-dev
要想使用路由，要在main.js文件中引入vue-router路由模块--- import VueRouter from 'vue-router'
Vue.use(VueRouter)
（1）注明要使用这个路由之后，就可以在下方配置路由--- const router = new VueRouter({})
（2）括号中传递对象，对象的参数是固定的。
（3）参数routes是个数组，数组里面可以拥有对应的对象。
（4）对象中的第一个参数是path，path是要路由的地址，比如下例我们的路由地址是根路径"/"
（5）对象中的第二个参做哪数是component，如果抓到了路由的地址，需要调用一个component，component可以跳转到对应的组件地址
现在这个路由并不能被使用，因为找纯州码不到Home和HelloWorld组件。所以，我们引进Home和HelloWorld组件。（注意：这里HelloWorld组件已存在，Home组件还未创建）
import HelloWorld from './components/HelloWorld'
import Home from './components/Home'
（1）首先，在components文件夹下建立Home.vue组件
（2）我们要让 Home.vue成为Header.vue和Footer.vue和Users.vue的父级
（3）操作Home.vue如下，然后将App.vue中的组件和import内容清除
现在可以找到路由地址“/”，也能执行Home组件，但是没有告诉系统在哪里展示这个Home组件。这里根组件是App，所以要在App.vue当中输入对应内容。 router-view/router-view
上图url处仔细观察会发现，有多余的#/标识，需要去掉。因为我们自己定义路由，点击实现的时候会有问题。
在配置路由时加入一个属性 mode:"history" ，就可以去掉了
功能和a标签一致，只是点击不会每次都发送请求，刷新页面，所以项迹衡目运行速率好很多。
vue3.0设置路由是修改那个文件
在余纯Vue3.0中设置路由，需要返洞对两个文件竖世咐进行修改：
1、src/router/index.js：这是Vue3.0中路由的入口文件，在这个文件中可以引入VueRouter并根据需要配置路由规则。具体来说，可以通过`createRouter`函数创建Router实例，并使用`routes`参数来定义路由规则。
2、src/App.vue：这是Vue3.0中的根组件，负责多个页面组件之间的切换。在这个文件中，可以通过``标签来展示当前路由对应的组件内容，并通过``标签来跳转到不同的路由。通过修改这两个文件，就可以实现Vue3.0中的路由设置和跳转。
Vue-cli-4-路由配置文件，路由进阶，二级路由
vue.config.js 是vue的配置文件，必须创建在 demo根目录 下，该配置文件中，只能使用commonjs模块化语法，使用module.export导出，格式如下图。
@符亮饥号代表src资源目录，在vue.config.js文件中将路径解胡键纳析，path.resolve是拼接路径方法。将@c定义为当前绝对路径
@c代表src目录下的components文件，@v代表src目录下的views文件，其他同理，后续在其他文件中引入文件时，只需要使用以下方法即可导入，不会随着文件目录的改裤没变而改变。
1.路由模式
2.路由元信息
meta属性，配置路由的元信息，其实就是在每个路由身上配置一份数据
3.路由守卫
在meta对象中，可以配置一个roles属性，其中可以配置路由的访问权限，下图中可访问的人已标记为admin，vip及user
其次，在 router.beforeEach 及 router.AfterEach 中可以配置信息
router.beforeEach 是路由前置守卫，每次跳转路由之前，都会拦截，其中next()方法表示下一步（跳转）,其中是一个回调函数，其中有三个参数to,from,next
router.AfterEach是 路由后置守卫，其中可以将页面的title设置为meta属性中设置的title,其中是一个回调函数，其中有两个参数to,from
浏览器的访问权限可以在application中的session storage中添加一个roles：admin，如果路由信息中meta中未设置roles，则无法访问该设置了roles属性的路由页面
安装： npm install nprogress（给路由页面的跳转添加一个上方的进度条）
导入：
首先在页面views中创建一个文件夹，然后在该文件夹中创建两个二级路由页面，如下图所示
然后在所需要创建二级路由的一级路由创建信息中添加一个 children数组 ，该数组中添加二个对象，每个对象就是该一级路由页面的一个二级路由页面，如下图所示，该二级路由信息中的component信息采用了 路由懒加载 的方式导入
然后在一级路由页面one.vue中写入二级路由页面的router-link导航和router-view
最终效果如下图所示
vue路由配置
首先，先来讲个小东西吧。我个人一般在开发的时候都会将ESLint关闭掉。在新建一个项目的时候，会提示你安装否。选择n就行了。也就是no。见下图！如果你不心安装了。也没事。在项目的配置文件中找到它注释掉即可。
首先第一步，在components文件夹里新建两个.vue文件。将用它们来路由页面。并且分别取名router1.router2
接下来，我们就开始配置路由了。首先说几个准备思路吧。第一：页面打羡掘开后是要有默认显示页的（默认的路由），第二，同时实现路由切换时像JStab切换效果。接下来，我们要在app.vue里写好2个导航命名为router1和router2。分别用来将router2,router1路由进来。（在这之前请把hello.vue的内容清空，才能看到现面第二张图的效果）
现在基谨氏本的准备工作已经做好了。现在看到min.js文件。我个人的习惯是喜欢把路由的配置写在这里或者引入到这里。不习惯放在router文件夹下面的index.js。请看下图片。首先将。原始的router引入的改成VueRouter。然后引入之前新建好的两个.vue文件。记得要use一下。最后创建一个router实例。第一个path / 表示的意思是默认路由进来的组件。也就是router1.
到了这里就差最后一步了。回到app.vue。写上路由。分别给router1,router2加上路由标签。router-link标签渲染时会自动增加一个A标签带href路转。后面的to='',就是将要路由到哪里去的min.js中的path路径。to="/"表示此处将路由显示出min.js路由配置中path为/的component。最后，router-view标签是将路由过来的组件渲染在什么地方。这里写在了导航下面。效果请看第二，第三张图片。第二张图片就是默认进来的路由页面。也就是router1.地址栏中的路径就是首页。第三张图地址栏中路径变了，而且内容也变了。说明路由成功。
最后给路由的导航加上像JS一样的tab切换效果。用到VUE路由中自有的类。router-link-active.意思是在路由激活时更变的class.看图。在style中写好css.页面上就可以看到默认显示的路由组件导航就有class了。不过此时，你已经成功了一半了。因为请看下面第三张图片。当点击router2的时候，出现了两个祥派散红色字体。这下尴尬了。
vue项目中关于路由的配置
在开发vue项目中，如果将穗御行所有路由都写在router.ts中会显得些许繁琐
为了解决这个问题呢，我们可以在每个模板下创建router文件将猜哗其抛出，然后在项目下的总router.js将其引入，拆孝在更改或者查找路由时会清晰明了
vue项目 动态路由怎么做
vue项目实现 动态路由 的方式大体可分为两种:
前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)
详情可参阅 花裤衩大佬 的项目 手把手...
后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)
这两种方法各有优点，效果都能实现，我们公司是通过第二中种方法实现的，原因就是公司项目里有一个专门的用户中心，里边逻辑很复杂，不好返给前端用户权限，担心路由放到前端不安全(以上的话是公司的后台同学讲的)，那好吧，抱着都试试、锻炼下自己能力的态度，我们搞了第二种方法。
大体步骤：拦截路由-后台取到路由-保存路由到localStorage(用户登录进来只会从后台取一次，其余都从本地取,所以用户，只有退出在登录路由才会更新)
菜单名字menName；
菜单路径menPath；
菜单指向的资源menuUrl(也就是组件地址, 一般从views层级开始写)
前端登录后通过接口请求拿到菜单数据后，
menName --- name
menPath --- path
menuUrl ----components文件
转换时,用到这个此蔽方法找组件资源 把 menuUrl 可以变为components的格式，转为组件文件
生成路由表
可以再过滤一遍生成的路由表
下面这个方法找到views底下所有的组件资源
路由表里路由的组件在所有组件资源里没找到时，将该路由的path变为/404
getRouter.push({ path: '*', redirect: '/404', hidden: true });
router.addRoutes(getRouter); //动态添加路由
前置工作：配置项目路由文件，该文件中没有路由，或者存在一部分公共路由，即没有权限的路由
每个路由都使用到组件Layout,这个组件是整体的页面布局:左侧菜单列，右侧页面,所以children下边的森饥州第一级路由就是你自己的开发的页面,meta里包含着路由的名字，以及路由对应的icon;
因为可能会有多级菜单，所以会出现children下边嵌套children的情况;
路由是数组格式
实际前端需要的 component是 component: () = import('@/views/content/classify'),
因为有多级路由的出现，所以要写成遍历递归方法，确保把每个component转成组件对象
因为后台传回的是字符串，所以要把加载组件的过程 封装成一个方法，用这个方法在遍历中使用;详情查看项目里的router文件夹下的 _import_development.js和_import_production.js文件
Layout我放的目录跟其他文件的目录不一样，所以我在遍历里单独处理，各位小伙伴可自己调整哈
beforeEach路由拦截，进入判断，如果发现本地没有路由数据，那就利用axios后台取一次，取完以后，利用localStorage存储起来，利用addRoutes动态添加路由，
ps：beforeEach好坏啊，一步小心就进入到了他的死循环，浏览器都tm崩了，得在一开始就加判断，拿到路由了，就直接next()，嘤嘤嘤
global.antRouter是为了传递数据给左侧菜单组件进行渲染
上边第三步会给 global.antRouter赋值，这是一个全局变量（可以用vuex替代），菜肢李单那边拿到路由，进行渲染
通过学习这些路由器设置和无线网络的技巧和方法，您可以更好地管理和控制您的网络，从而获得更好的上网体验。
