零基础快乐学vue-router

能看到这篇文章的老铁，想必已经开始学vue了，戎马关山北，凭轩涕泗流。无论前方多么的艰难，都要保持乐观积极向上的心态，好啦，开整vue-router吧，这个是必学的，也许我会有错误，希望大佬们多多担待。。。。。

路由的内部就是，访问路径和组件映射起来，它来维护这个映射表，

安装路由

这里可以去掉@4，这个命令会安装 vue-router 包的最新 4.x.x 版本。不写的话是安装最新版本的vue-router

vue-router的目的就是维护一个映射关系，一个Url对应一个组件，那么好，现在就开始创建这个表，，这个表是在src下，

路由基本使用

这个库里面是有一个函数，我们调用这个函数，函数里面写入固定的参数，

返回的router就是我们要的组件和url映射表，把它到导出去，然后再mian.js里面引入并且使用

那么问题来喽，为什么要引入main.js里面呢，答案是

main.js 通常是应用程序的入口文件。在这里引入路由器可以确保应用程序在启动时就能正确设置和初始化路由。这是整个应用生命周期的起点，非常适合进行全局配置。以后写的pinia 也是要在这个使用的，因为是全局都要用所以就写在这里咯，

就在你偷偷运行的时候，好好好，会报错，因为会缺少history,这个是告诉我们用什么模式一个是hash,另一个是history,完整写法

这回运行吧，肯定不会报错了，等了五分钟，咦页面怎么没有反应，切换路由也没有反应，路由已经和url形成映射表了呀，呆瓜，是因为，没有占位符<router-view></router-view>,

router-view是Vue.js框架中Vue Router插件所提供的一个内置组件，用于在单页面应用（SPA）中实现视图的动态切换。它的主要作用是根据当前的路由展示相应的组件内容。

当用户访问不同的路径时，Vue Router会根据路由配置找到相应的组件，然后将该组件渲染到router-view的位置。

简而言之的说，就是他是会给你留这一个位置，你让那个组件做进来都可以，没有位置当然也就不能做进来喽，

你想把组件写到哪里你就把这个写到哪里，你这时候切换路由的时候还是去改浏览器的地址，vue-router提供了方便进行切换的组件，

点击的根本就是改变url从而改变页面显示的组件，好啦 ，学到这，基础的就完事了，看吧很简单

路由的默认路径

 router-link 的属性repalce，没有记录，变成替换模式跳转，不写默认的是push

to 属性也可以传递一个对象，作用一样，

路由懒加载

如果像以前那么写的话，所有的组件都会在一开始全部下载下来，会导致首屏加载速度过慢，解决办法就是，懒加载，

这里我的理解就是,当路由跳转的时候，也就是调用import函数的时候，import函数返回一个promise对象，当加载成功，也就是网络请求成功的时候，promise就会有一个处理完成的状态，并且then中的方法会执行，then里面可以对组件进行操作，，，这就是我得理解，汗流浃背了吧，老铁，学过promise还好，没学过也没关系，也很好学，。。。。

这里import函数会分包

这里分不出来哪个是view包，哪个是about包，这时候需要魔法注释

目前rules就配置了两个属性，一个是path属性，一个是compent（组件）属性，还可以增加name属性，nanme属性是独一无二的，不要重复

好可以自定义属性，meta属性，

嘻嘻，是不是很简单，这又是一个知识点，慢慢学习还是很快乐的，

动态路由

/user/123或者其他/user/222,都可以匹配到这个组件，我写的url是随机写的，但是user是固定的，

如果多个用户可以共用同一个组件，如果你想不同用户拿到不同的数据，如果是在模板中获取id,

看清楚这里是$route，不是router,params是传过来的参数的意思，他是对象，展示的结果就是,

前提是

这个位置的id是123

<h2>123</h2>

如果想在js里面拿到id，vue-router里面有一个useroute函数，这里面可以拿到，

这个钩子函数的意思就是动态路由跳转的时候就会调用这个钩子函数，这个钩子函数是我在官网看到的，感兴趣可以去看看，但主要的意思就是这个意思，如果不发生跳转它是不会被调用的，所以第一次还是要通过route.params.id来获取id

获取的结果就是这个样子

都看到这里了，在坚持一下，还有几个就看完了

配置404路由

如果匹配一个不存在的路径都会显示这个组件,看path的位置

        如果是这么写的

多加了一个星，区别在于是否会被解析，会被解析成一个数组，如果需要对这个路径做使用，那么就加上星

这里知识点就是很杂，没有逻辑，有一个印象就可以，多多练习就能记住，别慌，再来一个，

编程式导航

我们现在跳转是用router-link,如果是任意一个元素想要跳转呢，例如Button，

那么我们就需要给一个点击事件，

这么做就完事了，这里补充一下

useroute和userouter的区别

嗯，我是这么理解的，useroute都是vue-router里面的api,只不过一个放的是路由的属性，一个放的是路由的方法，route是显示当前路由的信息，例如名称（name）、路径（path）、参数（params）、查询参数（query）等信息。而router是当前路由的方法，例如push(),这里理解，

url传参数

用v3写是这么写的，

用2是这么写的

在template上用就可以拿到参数

坚持坚持，还有几个知识点

返回页面

当然还有其他方法喽，向前一部，这个意思简单的说就是先点击页面前进，点击返回，在浏览器就可以点击一步前进了，相当于有缓存的意思，这个不用记，了解一下就可以，

好啦，完事了，过两天，我还要给这篇文章做补充的，上一篇的ts 还没写完，我会有时间补上的，以后补充的内容就是导航守卫之类的，希望我的文章能帮助你，虽然写的不怎么太好，能帮到你就是我得荣幸，如有错误，希望批评指正，共同进步！！！！

动态添加路由

开发后台管理系统是要分权限的，所以要动态加载路由，根据用户角色分配菜单，

怎么动态管理路由

动态路由对于新手来说算是一个难点，抛开项目，举一个简单的例子，就是我设置一个变量，这个变量就是超级管理员

后期有数据的时候就要用网络请求，去判断是不是超级管理员，下面还有一个知识，只不过要先了解子路由是怎么写的，因为菜单是分一级路由或者子路由的，这个位置只能是在开发中才能体会，文字描述太生硬了， 我只能写出写法来，这个地方我后期在做一些优化，

现在一级路由已经有了，但是我想要菜单下面的子集还有菜单，那么就这么做

巧了不是，我又有一个问题了，一级路由下面可能有很多子路由，那么，我想要其中的子路由只能是超级管理员看，我这该怎么写，还是在这个文件里面，判断如果是超级管理员的话，，那么就添加路由，第一个函数的参数是父路由的name,第二个参数就是子路由的映射表啦，

好啦好啦，这里动态添加路由就完事了，我不知道会不会有人看到这里，本来是新手零基础的，哎，没办法，我只能解释我自己的想法，有不会的可以讨论一下，

登录逻辑的导航守卫

进入后台管理页面之前要判断当前用户是否登录，然后根据逻辑进行不同的处理，如果没有登录要先登录，成功之后就进入到首页，那么这些逻辑应该放在哪里？

首先了解什么是路由导航守卫，这几个字要分开看，路由导航，守卫， 什么是路由导航，就是一个路由导航到另一个路由，举例子就是从/home跳转到/list ,那么什么叫守卫，守卫的意思就是，这两个路由跳转的过程，中间环节，进行拦截，进行判断逻辑，满足就跳转，不满足就跳转到其他，

这两个参数的意思是to:要跳入哪个路由，from :从哪个路由来的，如果不是login 就跳转到login

上述是判断是否是login路由，那么我怎么能知道他是否登录呢。实际开发中，我们要进行网络请求，如果请求成功，那么localstorage就回存储一个Token，

我们应该点击登录，随后进行网络请求，请求成功后，拿到Token保存到localstorage, 具体代码如下

点击之后存储token 跳转，跳转路径之前，又回到导航守卫，判断;localstorage里面能不能拿到token ,有值得情况就不走if判断里面得内容了，如果有退出登录了，就删除本地存储，

导航守卫的整个解析过程，这个可以看官方文档解释，会比较更详细一些,这里我就不写了，这些，大概就已经写完了，

也不知道会不会有人能看到这里。。。。。。