简单的vue路由跳转示例

一、基本的定义

1. 路由（Route）：路由是前端框架中的一个核心概念，它负责将用户界面中的不同部分与应用程序中的逻辑组件进行映射。每个路由定义了一个路径（URL）与一个或多个视图组件之间的关联。当用户访问特定的路径时，相应的视图组件会被渲染和显示。

2. 路由器（Router）：路由器是管理所有路由的容器，它包含了一组路由规则（路由集合，routes）。路由器负责解析当前的 URL，并根据匹配的路由规则来决定应该渲染哪个视图组件。路由器还提供了导航功能，允许用户在不同的路由之间进行跳转。

3. <router-link>：<router-link> 是一个自定义的 HTML 标签，用于创建导航链接。它类似于传统的 <a> 标签，但提供了一些额外的功能，如高亮当前激活的路由、防止不必要的页面刷新等。通过设置 to 属性，可以指定要跳转的目标路径。

4. <router-view>：<router-view> 是一个占位符组件，用于显示与当前路径匹配的视图组件。当用户访问某个路径时，路由器会根据配置将相应的组件渲染到 <router-view> 的位置。<router-view> 可以在应用程序中的任何地方使用，以实现多级嵌套路由。

二、创建vue项目

1、创建两个页面home.vue和about.vue

2、安装路由相关的依赖

npm install vue-router

3、创建router文件夹并创建index.js

4、安装相关的路由依赖

npm install vue-router

5、开始在index.js文件中配置路由表，也就是路由集合routes

6、开始把路由集合routes装在路由器router中

7、把路由器router暴露出去，便于全局使用

8、在全局配置文件main.js中导入路由器router

9、在页面里使用链接式路由

10、在页面里使用编程式路由

11、演示效果

三、展示404界面

1、创建404View.vue

2、在路由表也配置404路径，如果找不到对应的路径，重定向到404页面

3、创建一个没有的路由链接

4、展示效果

四、源代码

gittee仓库源代码：https://gitee.com/zyGitee983/learning-notes.git