Vue Router模拟多页面效果

我们都知道，在以前想要写多页面的时候，一般都会创建多个html，比如我们需要十个页面，就要创建十个html，然后通过<a>标签来进行跳转，这样子很难达到复用，比如我们的页面头部都是同一个头部，如果运用原生JS来写，那不得每个html都写一份头部？？？太麻烦了， 复制粘贴都会累死人。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16820.html

而Vue是一款轻量级、高性能的前端框架，专为构建单页面应用而设计。而单页面应用的核心优势在于能够提供平滑的用户体验，无需每次页面跳转都重新加载整个页面，仅需局部刷新或替换视图组件即可。然而，为了实现这种无缝的页面跳转和视图管理，我们需要一个强大的路由管理系统——Vue Router。而这个强大的路由管理系统巧妙的将我们的单页面变成了一个“多页面”，但却不是真正的多页面，根据前面的学习，我们都知道我们写的组件里的代码最终都会挂载在根节点app上，然后才回去展示，那么说白了还是单页面，只是在我们点击跳转页面的时候，将之前的那段代码剔除掉，拿出我们需要展示的代码挂载在根节点上去展示出来，而这就是我们Vue Router所需要做的。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16820.html

Vue Router简介及配置

vue-router是Vue.js框架的官方路由管理器，专门设计用于构建单页面应用（Single Page Applications，SPA）。在单页面应用中，多个“页面”或视图共享同一个HTML文档，路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。简单来说，就是当我们去到不同的URL路径中时，展示不同的代码片段，或者说展示不同的vue组件。模拟当url改变时，切换显示不同的组件，实现成多页的效果，只是模拟成多页的效果。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16820.html

• vue-router的主要功能包括：
  1. 声明式路由：通过简单的配置，你可以将URL路径映射到特定的组件，这样当URL改变时，对应的组件就会自动加载和渲染。
  2. 嵌套路由：支持创建复杂的路由结构，子路由可以嵌套在父路由下，形成树状结构，适合复杂的应用架构。
  3. 导航守卫：提供了多种方式来控制导航流程，包括全局守卫、单个路由独享守卫、组件内的守卫等，可用于执行权限检查、数据预取等操作。
  4. 懒加载：只在路由被访问时才加载对应的组件，可以提高首次加载速度，减少初始资源消耗。
  5. HTML5 History模式：利用HTML5的History API来实现浏览器历史记录的管理，使URL看起来更自然，不带#符号，提供更好的用户体验。
  6. 过渡效果：可以为路由切换添加动画效果，增强视觉体验。
  7. 路由参数和查询字符串：可以方便地在路由中使用动态参数和查询参数，从而在组件中访问这些信息。
  8. 命名视图和命名路由：可以定义多个视图和路由，使页面布局更加灵活。
• vue-router 提供了两个主要的组件来帮助我们实现路由功能：
  1. router-link：这是一个用于创建链接的组件，它会渲染为 HTML 中的 <a> 标签，但同时会处理单页面应用中的导航逻辑，确保页面不会重新加载，而只是替换或显示新的组件。一般用的时候，都会与to连在一起用，例如<router-link to="/home">首页</router-link>|
  2. router-view：这个组件是用于放置动态组件的容器。当路由发生变化时，router-view 会根据路由规则显示相应的组件。它是应用布局中的占位符，用于插入当前活动的视图组件。简单来说就是，这个组件在哪，被选中的组件就会渲染在哪。

  OK的，我们还是跟之前一样，创建一个Vue项目，里面的提供的功能选项，我们还是先不选（有路由配置选项），我们先来手动自己安装，理解一下是怎么个事先。这时候我们就可以打开官方提供的关于Vue Router的官方文档Vue Router。

• 首先，我们需要输入npm install vue-router@4，安装与vue3相匹配的路由安装包，vue-router就会存放在node_module里面
• 然后，我们通常会在src目录下创建一个Router文件夹，并创建index.js用于存放路由配置

  文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16820.html

• 然后在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了。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16820.html

简单实现一下

做个简单的框架来看看效果：文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16820.html

1. 创建一个views文件夹，里存放一些组件，用来展示

   

2. 然后在根组件App中写入下面这些代码看看

   

3. 配置好相关的路由规则：（当你点击首页时，他的to与路由中的path命中，只要命中就会在<router-view> 所在的位置（页面或者说组件里）显示出来，而此时页面上的导航栏就会在后面加上/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文件中写入<h2>home page</h2>，看看能不能出来文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16820.html

文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16820.html

5. OK，再将其他的路由配置完：（这里采用另外一个组件的加载方式--组件的懒加载，效果是一模一样的，只有当你点击要去到该url中的时候才会加载出来，可以让初始页面更快地加载出来）

   文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16820.html

6. 出来的效果肯定也是一样的。然而现在要在Home.vue 中整个按钮，要求点击这个按钮我就可以去到hot页面，那我们就要创建个点击事件咯，然后跳转到/hot这个url的页面来看看怎么实现的吧

   文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16820.html

   创建一个按钮，并且绑定点击事件，调用vue-router库中的useRouter的方法，用Router对Vue Router实例的进行引用，在定义了一个箭头函数goHot，用于处理点击按钮后的逻辑。函数内部先使用console.log(router);记录router对象，可以看到里面有个push的方法可以让我们跳转到指定页面，当然你会发现还有一个方法resolve也可以，不过这俩个还是有点区别的，官方不可能创建俩个一样的功能的方法：push是用于直接跳转到一个路由，它会在浏览器的历史堆栈中添加一个新的记录，点击后退按钮会回到前一个路由。但是resolve用于获取一个路由的完整信息，包括 URL，将这个路由替换掉之前的路由，点击后退按钮不会回到前一个路由，会提留在当前路由。不过一般我们都是用push

    这样子我们也可以实现跳转：

所以，我们就有两种路由跳转的方式：

1. 使用router-link进行跳转
2. 使用router.push() 进行跳转，这是编程式路由跳转

参数传递

在 Vue Router 中，我们可以向路由传递参数，有两种主要的方式：

1. Query 参数：这类似于 URL 后面的查询字符串，可以通过 query 对象传递。

    

   传递：

   Javascript

   复制代码

   router.push({path: '/hot', query: {id: '123'}});
   

   接收：

   Javascript

   复制代码

   console.log($route.query.id);
   

2. 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 官方的路由管理器，用于在单页面应用中实现多页面体验。它通过局部刷新或替换视图组件，避免了每次页面跳转时重新加载整个页面，从而提升了用户体验。下一步，我将使用这些基础知识，去构建一个简单的登录系统，实操一下，在编译过程中继续学习