21Vue入门教程VueRouter基础使用

　　1。前言
　　本小节我们介绍如何在Vue项目中使用VueRouter。包括VueRouter的下载、什么是VueRouter、如何使用VueRouter配置一个单页应用。其中，学习使用VueRouter配置一个单页应用是本节的重点。同学们在学完本节课程之后需要自己多尝试配置路由。2。木子解释
　　VueRouter是Vue。js官方的路由管理器。它和Vue。js的核心深度集成，让构建单页面应用变得易如反掌。官方定义VueRouter是SPA（单页应用）的路径管理器，它允许我们通过不同的URL访问不同的内容。3安装VueRouter3。1直接下载
　　我们可以在官网（VueRouter）上直接下载VueRouter。在Vue之后引入VueRouter会进行自动安装：3。2CDN引用3。3NPM或Yarnnpminstallvuerouteroryarnaddvuerouter
　　在一个模块化的打包系统中，您必须显式地通过Vue。use（）来安装Vuex：importVuefromvueimportVueRouterfromvuerouterVue。use（VueRouter）
　　在本章节的VueRouter学习中，我们都将使用CDN的方式引入路由。4。使用VueRouter
　　用Vue。jsVueRouter创建单页应用，是非常简单的。使用Vue。js，我们已经可以通过组合组件来组成应用程序，当你要把VueRouter添加进来，我们需要做的是，将组件（components）映射到路由（routes），然后告诉VueRouter在哪里渲染它们。在使用VueRouter之前，我们需要先了解VueRouter的两个内置组件：：该组件用于设置一个导航链接，切换不同HTML内容。to属性为目标地址，即要显示的内容。例：首页；：该组件将渲染路由匹配到的组件内容。
　　接下来我们看一个基本例子：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodyrouterlinktoindex首页routerlinkrouterlinktoarticle文章routerlinkrouterviewrouterviewbodyhtml
　　运行案例可查看在线运行效果
　　代码解释：HTML代码第1213行，我们定义了两个跳转链接；HTML代码第15行，我们使用组件来渲染匹配组件；JS代码第57行，我们定义了组件Index；JS代码第911行，我们定义了组件Article；JS代码第1316行，我们定义了路由数组：首页路由，地址为‘index’，匹配组件Index；文章路由，地址为‘article’，匹配组件Article。
　　JS代码第1820行，创建router实例，然后传routes配置。JS代码第24行，通过router配置参数注入路由。5。小结
　　本节，我们带大家学习了VueRouter。主要知识点有以下几点：通过CDN、NPM、Yarn等方式下载VueRouter；使用VueRouter配置一个简单的单页应用。