40_尚硅谷_Vue_基本路由

好，下面我们要做第一个叫简单的路由啊，基本上。实际上就是实现一个基本的路由的切换，我左侧实际上就是两个什么是路由链接吧啊，而右侧就是我们路由组件显示的部分，而这个头部是个固定的啊，头部是个固定的好行。嗯，OK。这个是我们最终做好的一个效果啊。来，这个包已经下好了啊，我们来创建一点结构啊。啊，先肯定有一个有一个来啊叫根主键是吧。还是叫什么呢吧。好，那我们以前所有其他组件都放在一个里面，Components，但这一次呢，我们换一个名字啊，为什么呢？因为在实际做项目过程中，我们的组件有两大类。

一类叫路由组件，一类什么呢？非路由组件啊，我会把非路由组件放在看下面。那路由组件呢，放在另外一个文件夹下面啊，这个文件夹的名字呢，可能会取两种名字比较常见，一个叫uses啊，一个叫pages。啊，可以选一个就行啊，那我们就选use吧。来，那我们就写一个。啊来，那也就是说我们其他组件呢，都是在这里面，下面我们来看一下啊，我们当前有几个路由组件。两个吧，一个是一个是。来我们去用啊，主要几个步骤，先把组件给他什么定义出来。

来一个叫宝宝。还有一个叫Tom。啊，稍微在这里面写点信息啊，能标识出来就行啊，这就about。这个就是hope。别的都可以不写。好，下一步咱要干嘛？是不是要想办法将我的路由组件映射成什么？路由对不对，那我们要在哪个里面去将映射路由了。刚才看到有个概念叫路由器是吧，那在这里面呢，就要创建路由器去。他在里面创建路由器有专需要专门定义一个模块。这里面一般我们会去专门去定义一个文件夹，叫roots，叫root吧，不叫root啊，就叫root root不叫路由器吗？

好，接着在这个里面写一个解X，就叫index。这不主路口的GS嘛啊，就他这个是一个什么模块呢，说明一下就路由器模块。啊，路由器模块。好，没问题啊，来那路由器模块刚才看了语法不用不用太背，我们就根据语法来去搞就行。是不是引需要他呀，那需要他的话，那我们需要引入他吧，引入import。没。B Le youga。Root。它是一个view的插件吗？那必然还要引入谁？You。

必然还要写一条语句。对。很好，其实就是一个基本的套路。对吧，那也就是说大家看到啊，当前是个路由器模块，那也就是说最终我这个模块应该向外暴露什么了。是不是路由器对象，那如何来产生路由器对象？看看这个API。干嘛对一个什么如是吧，加括号传什么配置对象。在这个里面配什么穴？是N个路由对吧，N个路由好。来那N个路由，我用什么样的选项来配置了。

它的值是什么类型数组？而数组里面每一个是不是都代表一个路由？那应该是个什么对象？而对象里面有几个属性？两个第一个是什么pass？啊，这个是不是应该是个路径呢？啊，我随便先写一个好接着。看什么还是看？倒是一个。要不不要，因为对应的是某个路由组件。那也就是说我们需要引入。录入主页吧，我不定义了两个吗？Import啊，我们定义了一个about对吧，好退格一下啊，我有一个views，有一个什么about。

再还一个后。没问题是吧，好。下面啊，我假设现在呢，去配置的是它。这里应该写什么比较好啊，好不好，千万要注意，有的人啊，一不小心就咔嚓一下，就这么响。梅西吗？不行，大家注意你现在写的这个灰色的说明什么？没有用。对吧，所以这个明显什么不对呀。能懂是吧，好，另外一个跟这个什么类似是吧，搞一下他来啊，这一个是后了吧。小写这样对吧。有没有看到？那也就是说我们现在路由组件定义好了，路由器路由是不是也配置好了，但有一个问题，我的路由器是不是要配置一下。

能懂吧，好，路由器在哪配置？哪个文件。入口JS创建view的时候去配置。那也就是说，现在我应该去干嘛，去引入谁？路由器点斜杠root了。为什么够了？因为。好，现在首先来说我这个import这个名字能不能写成root啊。从这里来看能不能。我啊，先别往下面啊，把它干掉，我想我写的这个行不行行。

是完全没有问题的。因为我是默认引入的时候可以用任何名。能懂吗？好，那接着我要去配置，那我想到的比较简单，语法就是这么写。行吗？可以吗？为什么不行？啊对啊，配置对象的属性都是一些固定的属性名。为什么叫他配置对象。不能随便修改。

叫什么？那也就是说，如果我这么引入了，我应该怎么写，如冒号。懂不懂啊，这个是因为有的同学容易经常容易犯错误，所以我就跟大家演示一下，当然我们肯定不会这么写，傻子才会这么写了。这么写多舒服啊，对吧啊OK。他主要是要记住这样一个事情啊，知道这样一个事啊。好没问题啊，那也就是说现在路由定义好了，路由也配置好了，路由器是不是也配置好了。是吧，好，下面就要开始去写界面了。请界面。这一个整个界面，整个。是哪个组件？

APP是吧，APP里面是不是有这么两个链接，这两个链接要用到一个组件标签。它的名字特别好啊，路由链接，这不翻译过来就可以了吗？就是link对吧。而我要显示当前路由组件是用到另外一个标签。Root-view。能不能，那也就是说我们下一个要做的事情，就是要写这两个标签去。这相当于是我们最后一步了。来。这里面为了简单起见啊，我就把有些的给它copy过来。整体结构给大家搞一下啊，用个about吧，用简单一点。大家看一下这是整体的这一个结构啊，也就是说这个结构应该是谁对吧。

是不是AP的？这个能懂吗？啊，把它格式化一下啊，这个里面也用到了boot的样式啊，它是用了boot的样式的，能看出来吧？啊，也是用了boot的样式啊，那也就是说我来检查一下这里面用上布样子没有。是不是用了啊，用了好那就没问题来下面。啊，下面我们来看啊，这里面没有自定义压，都是用的布头样式，这个是它的头部相面，最上面的头部这个动吗。不用动对不对，固定的下面这一个是左边这一个是什么。右边的部分能不能看到。左右两个部分吗。好，接着来。现在是这样一个样子。大家看到没有，现在这里面是不是两个A标签。能看到吧，好，两个A标签，当我们最好不要写A。

我们应该写什么呢？对吧，而root到link里面该怎么去指定我的路由链接的那个pass了，对不对，我是不是指定pass啊，其实看文档就可以。认了吧，文档就能告诉我们去写什么东西，你看这里面有什么？我当然你是不是也可以看它的，相当于这些教程去去搞啊啊OK。啊，什么。To是不是很简单了啊，OK，那也就是说这个地方要指定什么，To等于好，这个地方肯定是指定那个，那个要显示的链接文本。那这个写什么，你应该很清楚了。能懂不能懂啊好，那另外这个地方。

来下面是不是还有一个叫后。是吧，呃，这个呢也叫什么后，这个名字能随便瞎写吗？不能一定要跟我们配置的这些，这个路由器里面配置的这个pass要什么，是不是要一致。啊，没问题，好。那这个地方还有一些样式的问题啊，样式首先这两个都有一个同样的样式。那同样样式是不是用class？那另外一个样式呢，是动态生成的，先不用管它，我们等会来看啊，上面是不是写好了下面啊，下面这一部分大家看到啊，这一部分就这不是整个是这一部分。是变化的。能不看到这一部分变化，那这一部分也就变化的部分是谁？

谁显示的部分？是不是路由组件啊，或者叫当前路由组件对不对。那我怎么样表示当前路由组件显示在这个div里面呢？写一个标签root杠六搞定就这么个事。还是比较清晰的吧，啊整个啊比较清晰啊。那也就是说我们后面再写路由相关的效果，其实主要就这几步啊，第一步把你的路由组件给它先什么，是不是在views这里面定义出来，第二步。路由组件定义出来干嘛呀，是不是映射成路由，在root里面是不是映射成路由。接着就要去在某一个组件里面去写两种标签。一个叫root-link，一个叫什么？

Root-you，就这么事？OK，路由器是不是配置一次就够了？路器需要每次的配置吗？不需要，路由器搞一次不就行了吗？我就一个路由器。流程大概懂吧，好，那现在呢，我们就来去运行一下，看一下我们当前的这个效果，我还没运行过来。嗯，N PM start。啊，少了一个S吧。IPM。嗯。好，启动了啊，8081。有些问题我们要说一说，诶首先这个样式有点不对啊是吧，嗯，看一下。

什么？哪个呀，Home里面不是这个吧，是APP吧，导航13行，哦对了，少写plus，因为两个都要有嘛，你要没有的话，是不是就没那个效果呀，它是固定的plus。是不是有了，好有啊，我们来看一下有哪些问题。这样显示有什么，一上来打开是这个样子，有哪些问题？不止一个问题啊。首先你得默认显示某一个组件吧。比如说默认显示about。对吧。那也就是说，默认是不是就应该请求恶报的？

这意思不啊，要请求实际上后面加一个什么好不好，你说这不好了吧，不行，这你手家的。对不对，我想自动说白了是不是自动要请求它呀，那自动要请求它其实也不难啊，这个地方只是说刚才没讲啊，但是呢，有一种特别的啊路由。这个路由呢，它也有一个plus，有一个跟路径。当我请求跟录音的时候，他有一个什么意思，重定向请求谁去好不好？能懂不啊，OK，这样相当于默认，是不是就请求这个about显示about去了？看一下。你好了没，好了吗？还有什么问题？

OK，大家看，嗯，有什么问题，主要看我们最终需要一个什么样的效果，对不对。也就是说，我们当前路由链接是不是都有一个颜色的标识？能看到吧，那此时我怎么知道我当前点哪一个呢？我们可以来选中一个，看一下它们的内名的变化。大家看一下这个A是不是只有一个类名，呃，下面这个这个下面只有一个类名，上面这个。除了这个还有一个啊，其实还有三个啊，主要我们用的是第二个叫root杠。哎，用的这个啊，不好意思用的这个。Active什么意思，激活的活的懂不懂啊，这一个类型啊，也就是说我选择了谁。谁就会有这个内因吧？那你说我该怎么办呢？

那很简单，我就给这个类名加样式啊。是概念不啊，比如说来啊。我就直接，因为后面可能有好多个那个路由链接，我就在这个index里面，我简单一个啊，就是这里面加个style。可以吧，给他。接着来一个什么color red可以不？我还写一个啊。感叹号什么意思？优先是吧，啊说白了你别不要不要改了是吧。来看一下。有没有？是不是有了？能看到吧，能看到啊。

啊，这是这一个啊这个，那现在基本上我们的基本路由就搞定了，其实也并不难了，主要我觉得对于路由这个使用，其实最最根本的还是理解。啊，先有个理解，其他用法也并不复杂。还是别的吗？没别的吧，嗯，行。