Vue Router模拟多页面效果_vue router mode history
我们都知道，在以前想要写多页面的时候，一般都会创建多个html，比如我们需要十个页面，就要创建十个html，然后通过标签来进行跳转，这样子很难达到复用，比如我们的页面头部都是同一个头部，如果运用原生JS来写，那不得每个html都写一份头部？？？太麻烦了， 复制粘贴都会累死人。
而Vue是一款轻量级、高性能的前端框架，专为构建单页面应用而设计。而单页面应用的核心优势在于能够提供平滑的用户体验，无需每次页面跳转都重新加载整个页面，仅需局部刷新或替换视图组件即可。然而，为了实现这种无缝的页面跳转和视图管理，我们需要一个强大的路由管理系统——Vue Router。而这个强大的路由管理系统巧妙的将我们的单页面变成了一个“多页面”，但却不是真正的多页面，根据前面的学习，我们都知道我们写的组件里的代码最终都会挂载在根节点app上，然后才回去展示，那么说白了还是单页面，只是在我们点击跳转页面的时候，将之前的那段代码剔除掉，拿出我们需要展示的代码挂载在根节点上去展示出来，而这就是我们Vue Router所需要做的。
Vue Router简介及配置
vue-router是Vue.js框架的官方路由管理器，专门设计用于构建单页面应用（Single Page Applications，SPA）。在单页面应用中，多个“页面”或视图共享同一个HTML文档，路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。简单来说，就是当我们去到不同的URL路径中时，展示不同的代码片段，或者说展示不同的vue组件。模拟当url改变时，切换显示不同的组件，实现成多页的效果，只是模拟成多页的效果。
- vue-router的主要功能包括：
- 声明式路由：通过简单的配置，你可以将URL路径映射到特定的组件，这样当URL改变时，对应的组件就会自动加载和渲染。
- 嵌套路由：支持创建复杂的路由结构，子路由可以嵌套在父路由下，形成树状结构，适合复杂的应用架构。
- 导航守卫：提供了多种方式来控制导航流程，包括全局守卫、单个路由独享守卫、组件内的守卫等，可用于执行权限检查、数据预取等操作。
- 懒加载：只在路由被访问时才加载对应的组件，可以提高首次加载速度，减少初始资源消耗。
- HTML5 History模式：利用HTML5的History API来实现浏览器历史记录的管理，使URL看起来更自然，不带#符号，提供更好的用户体验。
- 过渡效果：可以为路由切换添加动画效果，增强视觉体验。
- 路由参数和查询字符串：可以方便地在路由中使用动态参数和查询参数，从而在组件中访问这些信息。
- 命名视图和命名路由：可以定义多个视图和路由，使页面布局更加灵活。
- vue-router 提供了两个主要的组件来帮助我们实现路由功能：
- router-link：这是一个用于创建链接的组件，它会渲染为 HTML 中的 标签，但同时会处理单页面应用中的导航逻辑，确保页面不会重新加载，而只是替换或显示新的组件。一般用的时候，都会与to连在一起用，例如
首页 | - router-view：这个组件是用于放置动态组件的容器。当路由发生变化时，router-view 会根据路由规则显示相应的组件。它是应用布局中的占位符，用于插入当前活动的视图组件。简单来说就是，这个组件在哪，被选中的组件就会渲染在哪。
- OK的，我们还是跟之前一样，创建一个Vue项目，里面的提供的功能选项，我们还是先不选（有路由配置选项），我们先来手动自己安装，理解一下是怎么个事先。这时候我们就可以打开官方提供的关于Vue Router的官方文档 Vue Router。
- 首先，我们需要输入npm install vue-router@4，安装与vue3相匹配的路由安装包，vue-router就会存放在node_module里面
- 然后，我们通常会在src目录下创建一个Router文件夹，并创建index.js用于存放路由配置
- 然后在index.js中引入库里面导出的函数createRouter以及里面的路由模式（createWebHistory和createWebHashHistory）他俩没什么太大的区别，不过一般我们会选择createWebHistory，主要是这个稍微好看一点。
- js
- 代码解读
- 复制代码
- import { createRouter ,createWebHistory} from "vue-router"; const routes =[] const router = createRouter({ history: createWebHistory(), // routes : routes 可以省略 routes }) export default router
- 然后我们需要在const routes =[]中配置我们需要的路由规则和导航逻辑。
- 最后，就需要去main.js中引入该文件，并使用 createApp(App).use(router).mount('#app') 将其注册到 Vue 应用中
- js
- 代码解读
- 复制代码
- import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app')
这样我们就可以调用vue-router里面的router-link和router-view了。
简单实现一下
做个简单的框架来看看效果：
- 创建一个views文件夹，里存放一些组件，用来展示
- 然后在根组件App中写入下面这些代码看看
- 配置好相关的路由规则：（当你点击首页时，他的to与路由中的path命中，只要命中就会在
所在的位置（页面或者说组件里）显示出来，而此时页面上的导航栏就会在后面加上/home） - js
- 代码解读
- 复制代码
- import { createRouter ,createWebHistory} from "vue-router"; import Home from '../views/Home.vue'; const routes =[ { path:'/home', component:Home } ] const router = createRouter({ history: createWebHistory(), // routes : routes 可以省略 routes }) export default router
4.在Home.vue文件中写入
home page
，看看能不能出来- OK，再将其他的路由配置完：（这里采用另外一个组件的加载方式--组件的懒加载，效果是一模一样的，只有当你点击要去到该url中的时候才会加载出来，可以让初始页面更快地加载出来）
- 出来的效果肯定也是一样的。然而现在要在Home.vue 中整个按钮，要求点击这个按钮我就可以去到hot页面，那我们就要创建个点击事件咯，然后跳转到/hot这个url的页面来看看怎么实现的吧
- 创建一个按钮，并且绑定点击事件，调用vue-router库中的useRouter的方法，用Router对Vue Router实例的进行引用，在定义了一个箭头函数goHot，用于处理点击按钮后的逻辑。函数内部先使用console.log(router);记录router对象，可以看到里面有个push的方法可以让我们跳转到指定页面，当然你会发现还有一个方法resolve也可以，不过这俩个还是有点区别的，官方不可能创建俩个一样的功能的方法：push是用于直接跳转到一个路由，它会在浏览器的历史堆栈中添加一个新的记录，点击后退按钮会回到前一个路由。但是resolve用于获取一个路由的完整信息，包括 URL，将这个路由替换掉之前的路由，点击后退按钮不会回到前一个路由，会提留在当前路由。不过一般我们都是用push
- 这样子我们也可以实现跳转：
所以，我们就有两种路由跳转的方式：
- 使用router-link进行跳转
- 使用router.push() 进行跳转，这是编程式路由跳转
参数传递
在 Vue Router 中，我们可以向路由传递参数，有两种主要的方式：
- Query 参数：这类似于 URL 后面的查询字符串，可以通过 query 对象传递。
- 传递：
- Javascript
- 代码解读
- 复制代码
- router.push({path: '/hot', query: {id: '123'}});
- 接收：
- Javascript
- 代码解读
- 复制代码
- console.log($route.query.id);
- Params 参数：这是在路由路径中定义的参数，需要在定义路由时指定。
- 传递：
- Javascript
- 代码解读
- 复制代码
- router.push({name: 'hot', params: {id: '123'}});
- 这里我们需要将配置路由修改一下：
- Javascript
- 代码解读
- 复制代码
- { path: '/hot/:id', name: 'hot', component: () => import('../views/Hot.vue'), props: true }
- 接收：
- Javascript
- 代码解读
- 复制代码
- console.log($route.params.id);
- 或者通过 defineProps函数：
- Javascript
- 代码解读
- 复制代码
- const props = defineProps({ id: String, }); console.log(props.id);
通过修改我们可以得到以下结果：
写在最后
Vue Router 是 Vue.js 官方的路由管理器，用于在单页面应用中实现多页面体验。它通过局部刷新或替换视图组件，避免了每次页面跳转时重新加载整个页面，从而提升了用户体验。下一步，我将使用这些基础知识，去构建一个简单的登录系统，实操一下，在编译过程中继续学习
ps：可以去vue Router官方文档进行学习哦：Vue Router
原文链接：
https://juejin.cn/post/7389049604631330843