VUE路由初体验，为初学者解析路由基础知识（一）

引言

Vue.js 是一款流行的 JavaScript 框架，用于构建用户界面。其中一个重要的功能就是路由（router）系统，在之前对vite脚手架的介绍中就能发现整个项目其实只有一个html文件，但实际上却可以展示非常多的页面，这就是vue路由的功劳

正文

什么是路由

路由是指根据不同的 URL 地址，展示不同的内容或页面。在传统的多页应用中，当用户点击链接时，浏览器会重新加载整个页面。而在单页应用中，而通过vue路由，只更新页面中的部分内容，提供更流畅的用户体验。这也正是路由被打造出来的直接原因：跳页面那一闪而过的白太丑了。

Vue 路由的安装与配置

在开始使用 Vue 路由之前，我们需要先安装相应的依赖包。可以使用 npm 或 yarn 进行安装，并在项目中引入 Vue Router。配置路由需要创建一个路由实例，并定义路由规则。可以通过在目录路径下执行npm install vue-router@4命令去安装vue路由，前提是必须安装node终端。当路由安装完成之后在node_modules的文件夹下就能看到vue-router文件夹。

路由的基本使用

使用路由

在vue-router安装完毕后我们就可以在 Vue 中使用组件来创建链接，用于在不同页面之间进行导航。以vite脚手架为例我们需要在main.js中使用vue-router。在把vue示例挂载到html元素之前使用路由。完成这一步就相当于是告诉了你的html页面：不要轻举妄动，这里用了vue路由

js 复制代码

createApp(App)
.use(router)
.mount('#app')

配置路由

首先在src目录下新建一个router文件夹（你叫啥都行）并在该文件夹下新建名为index.js的文件。随后将你已经写好的组件或者页面的vue文件通过import引入到这个文件中。然后定义一个名为routes的数组，数组中的每个数组元素都是一个对象，这个对象有两个值分别是path和component，代表要在什么目录使用什么组件。

js 复制代码

    const routes = [
  
    {
        path:'/homepage',
        component:Home,
//当路径为：/homepage时使用名为Home的vue组件
      
    },

    {
        path:'/aboutpage',
        component:About,
    },

]

插入页面

虽然你已经用上了路由，但是具体的怎么渲染页面你的浏览器可是一窍不通。我们需要再APP.vue文件的html片段中使用标签去告诉你的浏览器路由中的组件具体在哪，举个栗子，这里我将标签分别放在div下方和上方，可以很直观的看到二者的区别

js 复制代码

     <router-view></router-view>
    <div class="page">
        这里是第一页
    </div>

js 复制代码

     
    <div class="page">
        这里是第一页
    </div>
    <router-view></router-view>

结论

Vue 路由是构建单页应用的重要工具，通过合理的配置和使用，可以实现页面切换和导航的功能。本文只是最简单的安装引入以及配置，在接下来的文章中我会继续完善路由的重定向，子目录以及原理等内容，希望可以帮助到各位初学者

参考资料：

Vue Router 官方文档：router.vuejs.org/

Vue.js 官方网站：vuejs.org/