路由简介，快来看看吧

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、vue-router是什么？
  • 1.1对SPA单页面的理解
• 二、使用步骤
  • 1.安装插件
  • 2.引入
    • 2.1创建js文件
    • 2.2在main.js中引入
  • 3.使用
• 三,嵌套路由
  • 二级路由
• 总结

---

前言

vue-router是Vue.js官方的路由插件，适用于构建单页面应用，vue的单页面是基于路由和组件

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue-router是什么？

vue-router其实就是一个插件，适用于构建单页面应用，单页面应用又基于路由和组件，传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，

1.1对SPA单页面的理解

SPA（ single-page application ） 仅在web页面初始化时加载相应的html、js、css，页面一旦加载完成，spa不会因为用户的操作二进行页面的重新加载或者跳转，而是利用路由机制实现html内容的变换。

SPA单页面的优点：用户体验好，快，内容的改变不需要中心加载整个页面，避免不必要的跳转和重新渲染，前后端分离，架构清晰，前端负责交互逻辑，后端负责数据处理

SPA单页面的缺点：初次加载耗时多为实现页面web应用功能及显示效果，须要在页面加载时将js、css同时加载，部分页面按需引入

二、使用步骤

1.安装插件

npm i vue-router

2.引入

2.1创建js文件

单独创建一个js文件

其中path为路径，一级路由前面要加/，二级路由不用加，component为引入的组件，还有一个配置项为name：name可以起任意名字，在填写路径时，直接写name名也是可以实现跳转的，这个配置不是必需品

2.2在main.js中引入

 

 3.使用

        router-link是vue-router中的一个内置组件

        

         其中to为跳转的路径，这个路径是你在js文件中配置好的，

---

三，嵌套路由

        写到这，呢有多增加了个配置项，children，二级路由，也为嵌套路由，是一个数组，数组里面正常配置

         在写跳转时，路由路径要写完整

<router-link to="/一级路由/嵌套路由">上一页</router-link>

 

总结

到此路由简介结束，有兴趣继续了解的，可以关注一下