---

---

本人最近Vue3在学习路由，这篇文章是本人总结出来的关于路由的基本使用以及部分高级使用如前置路由守卫和动态路由等，如有错误欢迎指出！

---

路由是用于实现页面间的路径(URL)映射以及页面的导航系统。简言之就是可以实现不刷新页面就能在一个页面里进行多个页面切换的方式。

首先我们完成vue3的安装，使用 npm init vite@latest来进行安装(我这里使用的是js代码来书写的)

画红框的文件可以直接删除，画蓝筐的App文件将代码内容大部分删除只留下基本格式就行，然后main.js中的对style.css的引入也要删除

在控制台执行npm i下载基础依赖便可以在App.vue文件内写入自己的基本样式然后通过npm run dev来查看页面是否成功生成

页面如图所示

使用npm install vue-router@4来在控制台安装router

然后在src文件夹目录下新建一个router文件夹并在文件夹里面新建一个index.js文件用来存放路由的配置文件
再在src文件夹目录下新建一个pages文件夹并在里面新建两个你的组件，并在你的两个初始组件中填入默认内容

写入基本内容，另一个就是我的组件2了

然后在index.js中引入配置文件和你的组件并将该index.js的router暴露出去以供main.js使用

代码自取：

main引入index并挂载到项目中，这样一来我们的router就配置好了，接下来就只需要在项目组件中使用它了

在你的根组件App.vue中使用标签router-link和router-view 来完成路由在你的跟组件页面上的渲染；
router-link用来设置对应的路由切换，有点类似HTML中的a标签；
router-view 配合router-link作为其出口用于将router-link标签指向的路由的页面渲染出来；
使用实例如下图代码所示：

代码自取：

最后使用npm run dev运行
效果如下图所示:

可以成功进行路由跳转。

https://router.vuejs.org/zh/

根据我们页面展示的效果大家我们可以看出一个问题，那就是我们网页的网址带有一个#符号，这和大部分的网站的url网址都不一样。

这是因为我们使用的路由模式的原因，常用的路由模式有两种：
hash模式(哈希模式):纯前端实现，监听浏览器事件，浏览器局部刷新，因为有#号所以url不美观。
history模式(历史模式):历史模式，需要后端支持，底层使用了html5中的history api，浏览器局部刷新，网址更美观。
我们这里引入的便是哈希模式的路由：

我们可以尝试引入history历史模式然后来观察网页url地址的变化

再使用npm run dev在控制台运行，效果如下：

我们可以发现现在的url没有#号了，和主流的网址差不多了。
但是时使用哈希模式还是历史模式还是要看情况的。

哈希模式：适用于纯前端没有后端支持的环境，对浏览器兼容性很好。
历史模式：需要后端的支持才能使用，不然页面报错且浏览器兼容性没那么强。

路由跳转再Vue中的使用频率非常的高，它的作用主要就是让你从A页面可以跳转到B页面，然后可以从B页面再返回到A页面。所以为了实现这个效果我们可以再在pages中新建一个组件MySkipView.vue,然后将其与MyView1.vue进行联动来完成该效果。

我们可以使用push来设置跳转基本配置

这里我们创建了一个用于跳转的组件MySkipView.vue所以我们要把它在index.js中进行引入操作
如图所示：

然后在当前页面组件MyView1.vue中的path路由目标中写入和index.js中一样配置的url名即可，如图所示：

这样以来就可以实现从MyView1.vue跳转到MySkipView.vue页面的效果.

以下是MyView1.vue的代码:

接下来是使用back方法来从MySkipView.vue页面返回到上一个页面

以下是MySkipView.vue组件的代码：

这样我们便可实现如下图所示的跳转并返回的效果：

1.点击跳转到MySkikView.vue按钮可以访问到该页面

2.点击返回上一页可以回到刚刚的页面

上面第四章我们学习了如何从一个页面跳转到另一个页面并可以返回到之前的页面，但是光光跳转页面还不够，我们这里要确保在从A页面跳转到B页面时可以将A页面的数据也一并传给B页面并且B页面要能成功接收并渲染出来。

我们可以通过使用query传参来将参数传递到指定的页面来实现

这里我们向MySkipView.vue传递了一个id值为114514。
以下是MyView1.vue组件的代码：

我们通过引入路由并打印路由来获取到传过来的数据（在控制台查看）

以下是MySkipView.vue组件的代码：

1.点击跳转到MySkioView页面

2.在MySkioView页面打开控制台会发现在proxy中的quary中有一个id属性就是我们传过来的值

这说明我们以及成功获取到MyView1.vue页面传递过来的值，现在将其打印出来就可以使用这个数据来进行渲染等操作了。

路由的重定向的作用就是可以为你的页面提供一个初始的渲染页面，如果不配置的话我们已进入该网站就会是如下样子：

可以看到是空着的，并没有显示任何页面。
为了优化用户体验我们可以通过路由的重定向来为这个网站设计一个初始的页面，确保已进入就会渲染那个初始页面，这里我们选择将MyView1.vue作为初始渲染的页面。

现在我们打开index.js开始配置：
我们可以通过redirect属性来进行路由的重定向。

这里path的值为’/'意思是默认状态下，而redirect的值选择我们想要的那个路由地址即可。

以下是示例index.js的代码：

现在我们在重新启动服务器看看效果：

可以看到一进来就渲染了组件1。

现在我们以及完成了初始进入网站页面的设置，但是当我们输入的url网址不存在时会发生什么呢？
如下图我胡乱输入了一个网址：

结果进入后网页就是显示一片空白，这对用户体验很不好，用户会不知道为什么网页时一片空白什么都没有的，所以我们需要一个可以提示用户url网址输入有误的页面才行，以此提高用户体验，没错，就是我们的404页面。

1.首先在pages中创建一个404页面组件

2.然后再index.js进行配置:

以下为index代码：

这里使用的/:pathMath(.*)意思是除了以上的路由外其他路由全部视为该404路由，所以这个路由需要放置在所有路由的最下方。

现在打开网页查看效果，404页面成功渲染。

动态路由就是可以根据用户登录以后的账号级别来对用户进行权限控制。

如果用户获取的路由这里我乱写几个数字那么MyView2.vue就不会被添加以及渲染到页面上

组件2无法被成功渲染

还原就好了，所以这里的 meta是可以根据情况进行配置的。这样就可以让有权限的用户如管理员进入特殊的界面了。

以下是动态路由的代码：

这篇文章较为详细地讲述了vue3中路由的各种使用和使用的场景，但还是有部分知识没有讲到，希望对大家对vue3路由的基本使用有帮助。