109-尚硅谷-尚医通-前台用户系统-技术点-nuxt路由

各位大家好，下面呢我们继续来开发医院详情功能，刚才把接口我们都已经做到了，那下面呢，咱就开始整合前端，在前端里边把功能最终做实现。在整合前端之前呢，咱们先要讲一个技术点，因为这个技术点是咱们一会儿要用到技术点。那这个技术点是什么呢？我给大家写一下，各位知道咱们现在呢，搭建咱们的前端环境用的这个框架是不是叫纳S框架呀？纳S框架是基于vuee做到的，它实验了一个叫末端渲染，而在纳S框架中呢，有一种操作叫做路由跳转操作，什么叫路由跳转？比如说我现在我点击里边的某个超链接，是不是能跳转到另外一个页面中去啊，这个过程我们可以叫路由跳转，而纳里边呢，有它自己特有的跳转方式，所以咱们一会儿做这个详情中就会用到纳S中的路由跳转，那这跳转怎么做？给各位我先做一个说明，然后咱们一会儿在里边用一下。

那我现在给大家讲一下这个技术点，各位记住，在NAS中的实现路由跳转，它有两种路由方式，第一种路由我们可以理解为叫固定路由。然后里边还有第二种路由，它叫做动态路由，这是NAS里边两种路由，那两种路由什么意思？给大家解释一下，我们先看第一个啊，固定路由，什么叫固定路由，也就是说你跳转那个路径是固定的，就是它是不变的，什么意思呢？比如我现在我在这里边，我跳转，那我这个位置是不是要想一个跳转地址啊，假如说我现在地址叫hospital这个地址，当我们一跳转，它是不是到这个对应的页面中去了，这个就叫固定路由，就是这个路由是固定一个值。

然后还有第二个叫做动态路由，什么叫动态路由啊，也就是说你每次跳转那个路径，它是不一定的，它是不一样的。是不一样的，举个例子啊，比如说我现在呢，我想查看一个详情信息，那咱每次是不是传入你医院的I地址，比如说我第一次传一，第二次传二，第三次传三，大家看每次这值是不是都不一样啊，所以这个叫什么？就叫动态路由，所以这是NAS中的两种路由，一种叫固定路由，一种叫动态路由，固定路由理解为它的地址是固定的。然后动态路由理解为他每次路径是不相同的，那这路由怎么做？给各位咱通过一个小例子做演示，然后在这个项目中怎么进去，比如说啊，咱以这个为例。因为之前呢，我在这个名称上边绑定一个事件，让他能做个跳转，那我们先看一下啊，我就通过里面这个例子，咱们来看一下，首先我先找到这个医院的名称位置。

可以看到。就在这里啊。然后在名称里边呢，绑定一个事件，叫这个click里边有一个show方法，然后show方法里边咱们用了这么一个JS中一个写法，window.location.href是不是做个跳转，然后通过路由跳转可以实现，比如现在我先演示第一个就咱说的固定路由，假如现在啊，我直接让他跳转的一个叫hospital里面去，然后他会找到对应的这个路径，或者对应这个页面，那这页面在哪里呢？给大家写一下啊，如果说你正写跳转，它默认会到那框架中找到配置里边的这么一个文件夹，这个文件夹跟你写的一样，比如我叫好的皮。因为现在我要演示固定路由，它的地址是不变的，只要你写杠hospital，它会默认到这个配置下边的hospital文件夹下里边的一个默认文件，这个文件默认就叫in代词了，所以这个就叫固定路由，我再说一遍啊，比如说现在当我们写的路径是这个叫杠hospital，然后当它实现跳转的时候呢，它会跳转到什么地方呢？默认会找到咱们这个那框架中这个。

配置四里边这个hop里边的index.vo这个文件，就是把它打开完整访问，这个就叫固定路由，是我们的这个做法，那这个给各位就写出来了，然后咱们做一个演示，比如现在我在这页面中呢，咱就随便写上这么一行内容，然后咱们做一个简单测试。比如现在我写的那种啊，比如就叫这个test。固定路由。然后下面我们加上那个。杠div，包括这个杠他里头。

这是我们写的一个简单的页面，然后页面写完之后，咱们下面来做个测试，按照我刚才说的，当咱们点击你这里边的名称，它会触发事件调我们的这个售方法，然后售方法里边写的路径是固定的，就是杠hospital，然后这个路径会默认找到配置下边的好的披里边的inex.voe的这么一个文件，那咱来试一下啊，我在里边加了这句话，Test的固定路由。咱们来测试，首先我先刷新页面。然后咱们现在点击这个北京协和医院这个名称。大家看是过来了，杠hospital，然后这里边有个名字是不是叫test的固定路由，所以这就是关于固定路由的这么一个特点，大家知道这里边的跳转这么一个规则，包括让你写这个路径，写页面，你要知道该怎么去写啊，这是第一个演示，然后这个演示之后呢，下面给各位再演示，第二个就关于我们这个叫动态路由。

那动态路由刚才提到就是你每次跳转的路径都不一样，它主要功能就是用在咱们的详情中，比如说大家看我这里传的是不是就这个院的这个编号，而每个院的编号是不是都不一样啊，这这个就叫动态路由，就是你每次的路径都不一样，也就里边的每次的编号都不同，而当我写这个动态路由的时候，我们再去创建页面，这该怎么去做呢？给大家写一下啊，动态路由。创建页面的这么一个规则是怎么样的，要求各位记住啊，它的规则就是怎么样的，还是在我们这个文件夹下面。创建一个vuee文件，但是这个vuee文件有一个命名的规范，这是固定的一个规范，就是你必须这么写，就是这么写才能找到，然后什么规范咱们以这个下颚线开头，后面加上你的参数的名称。

然后点上Vue，所以我们现在需要这么来创建的页面，就是加个下划线，加个名称，参数名称随便起，但是必须是以下划线开头，这是一个规范，要各位记住啊，我这里写一下以这个。下划线开头，所以咱们现在按照规则，我就把这个创建一下，比如我们的参数就要这个hot code，然后我在这个hospital这下边建一个文件，咱们以这个下划线开头，我们叫hospital code.vuee这样的话就完成了这么一个创建，也就是里边的。这么一个文件，然后创建之后呢，咱们在那个文件中，我们可以给他也是写入一些内容，为了咱们就是做测试。这个各位我先截过来，大家注意里边这个特点啊，就是怎么在动态路由情况下创建页面，它是以下划线开头，然后写完之后我下面向里边，比如说给它随便写上这么一段内容，咱们也是做个测试。

那这那种，比如说我叫太这种。动态路由，然后在咱们跳转路径的后面，是不是传过一个ID，让他每次都不一样，那这个我们就完成了，完成之后我们最终做测试。比如说咱们回来我先刷新，刷新之后，现在我点击这个北京协和医院这个名称，咱们一点。大家看是不是就过来了，然后你看路径中包含了一个ID在里边的值显示，是不是叫test的动态路由啊，所以这就是关于NAS里边的两种路由，一种叫固定，一种叫动态，我最后重复一遍啊，固定路由就是你路径写的是唯一的，比如我写个hospital，那它会找到配S下边的hospital里边的默认的inex.view这个文件，这是由na给我们做到的，如果你后面传入一个ID值，它默认找到你这个hot披里边的下划线开头这个文件的，这里边内容就是我们现在写一个下划线hot code，它把这个文件会找到。

所以现在咱就把这个动态路由，还有固定路由，它的路由的特点给各位做了一个介绍，大家把这要知道，因为咱们马上就要用到这个特点，而咱们一会儿用的大家看啊，因为我们要有很多医院，每个医院的ID是不一样的，所以咱们用的是不是应该是一个动态路由，也就是这个页面下划线how code view啊，所以我先把这个去掉。因为咱就保留一个，为了咱们马上进行使用，所以这是关于纳中路由的这个讲解。