day05/下午/102-尚硅谷-尚融宝-路由的实现

那根据刚才我们创建的这个，呃页面呢，我们知道我们引了一个view JS，引了一个root JS到这个目录当中，所以呢，在页面当中我们要基于原来的这个模型呢，再引U哈S2C，然后呢，就是没有rootr JS了，这样的话呢，我们就把它呃这个基础结构啊，基础需要的这样的一个组件库引入到我们的页面当中了，接下来呢，我们做这样的一个功能，就是在我们的页面当中呢，我们也有一些导航。而这些导航呢，啊，是基于我们的叫做路由啊创建出来的路由导航，因为我们肯定路由嘛，它是动态加载页面的，所以呢，我们如何实现动态加载页面的功能啊，要基于我们的这个view root啊给我们提供的一个嗯，叫路由标签，好，那我在这个地方呢，就写一个先写个标题吧。比如说，嗯。

叫那个。容易接受啊，然后比如说叫贾玲好，然后接下来呢，我也写，就是刚才他的有一些内容，那呃，因为呃在这个view当中有个叫路由的标签，我们就使用ru，这是一个呃和A标签差不多的标签，只不过它有特殊的功能，叫路由，然后接下来呢，在这个地方呢，我写啊，比如说人基本信息啊，然后这个to这块呢，就是写你的路由地址啊，写路由地址比如说这块可以写一个基本信息，In for，这就是它的一个基本信息了，然后再接下来呢，我再复制两个。然后这块呢，叫演绎经历对吧？啊然后呢，这块呢，我就写。演绎经历我就简单写吧，演艺经历行吧啊好，然后接下来呢，这块呢，是主要作品，主要作品啊，然后这块那些主要作品行吧，好，然后呢，那这块我就跟他风格一致吧，基本信息行吧，好，那这样的话呢，我们就把这个整个的这个root link呀，就给它定义好了，然后呢，这块呢，其实就是我们所说的路由了啊，那就跟我们刚才讲的那个锚点的概念，就那个1234锚点的那个概念呢，其实是类似的，然后接下来呢，我希望我在这面一点击这个演绎经历的时候呢，我这个演绎经历页面里面的内容呢，会被动态的加载进来，动态的加载到哪呢？动态的加载到下面这个地方，我们管它叫路由出口，好然后在这个地方呢，我们写一个叫做RO。

没有。这样的一个内容，然后呢，默认情况下呢，我们先不展示任何的页面组件啊，就这样写就可以了，好，所以这就是我们整个的HTML部分的内容，那接下来它能不能运行呢？它默认情况下呢。

你看它是一闪了一下哈，它是呃，没有办法运行的，为什么，因为我们脚本呢还没有完善，所以接下来呢，我们要在脚本这个位置呢，啊，去完善我们的路由功能，那首先呢，我们要在我们的这个。地方就是路由出口这个地方，当你啊显示这个基本信息的时候，你要具体展示什么内容，当你想显示演绎经历的时候，你要具体展示什么内容，当你要展示主要作品的时候，你要具体展示什么内容，那这些内容呢，我们可以呢，创建单独的模板文件，那么比较方便的方式呢，是先用一个字符串的方式啊，模板字符串的方式来展示，那么具体模板文件的创创建方式呢，我们在项目当中再讲，那现在我们先说一个比较简单的模板字串，好，那在这个地方呢，我们为每一个部分的内容呢，创建它主要的内容，那么怎么去创建呢？啊，比如说我写一个叫做基本信息，这是基本信息模板啊，然后呢，这里面呢，有一个固定的叫做template的一个属性，这个temple。

Temp类的这个属性呢，它里面可以写一个HTML字符串，这个HTML字符串的未来就会被动态的展示到这个位置，所以这块呢，我们可以写，比如说我随便写一个，比如说div吧，然后这块呢是。贾小玲啊，然后呢，嗯，多大了，就写30吧，好，30岁还有女啊，嗯，喜剧演员对吧？好，这个是他的一个基本信息的这样一个模板，那么同样的其他的模板，我们也可以用这个类似的方式给它创建出来，比如说演绎经历的模板。演艺经历的模板，然后这是主要作品的模板。

演艺经历就是相声。相声。小品对吧，演导演对吧？好，然后呢，这个是他的演艺经历，然后将来主要作品，主要作品我就随便写，就是你好欢迎行吧啊这个是他的啊这样的三个模板，然后这三个模板呢，我们是希望呢，它能够被啊这个路由啊关联到，也就是说当我点击这个路由的时候，我呢想关联到这个模板，并且把这个模板呢显示在这个路由出口的位置啊，同样当我点击后面这两个路由的时候呢，我想关联到对应后面这两个模板，然后呢，把这两个模板呢分别显示在这个出口的位置，那这样的话呢，我们就要啊用这个路由和这个模板啊做一个匹配啊，那怎么匹配呢？我们来创建一个路由列表。

所以上面这块我们是定义，我们管它叫定义组件哈，定义组件模板，然后这块呢，我们叫。定义路由列表，好，然后接下来呢，Cost这块我们写ROS，这是我们的路由列表，然后呢，这个路由列表怎么定义呢？用中括号啊呃，这个中括号在javascript当中，它是一个数组的意思，我们要定义一组路由，那么把这个对应的都给它定义上的话呢，我们就每个是一个对象，然后对象里面有个pass。Pass呢，我们定义路径，路径的话呢，就比如说上面这个基本信息，好，这是个路径啊，前面不要忘了加个杠，然后后面我们对应什么组件呢，组件呢，我们用一个关键词叫做component com。

啊没有S啊component，然后接下来呢，我们对应哪组件，就对应这个基本信息，这个组件好，这就是其中一个啊路由的一个配置了，那么同样的方式呢，我们可以配置剩下的两个路由，好，那所以呢，第二个呢，就是演绎经历。然后第三个呢，就是主要作品好，我们让所有的这个路由的这个地址呢，和我们的这个具体的这个组件模板呢，给他做这个一一的对应啊对应完了之后呢，我们的路由列表呢，就定义好了，那路由列表定义好了之后呢，我们要用这个路由列表呢，来创建一个路由对象。好，然后接下来呢，我们如何去创建这个路由对象呢？叫new view root，好，然后呢，这个路由对象里面呢，它有一个属性，这个属性叫入这个属性呢，是一个关键字啊，一个关键字，然后这里面呢，要挂载一个路由列表，那怎么挂呢？把它挂上就行了，这样的话呢，我们创建出来的这个路由对象。

就是有这个路由列表的路由对象了，那么因为这个属性和我们的这个变量的名字正好一致，所以呢，我们可以用简写的方式这样去写就可以了。好那么创建完路由对象之后呢，我们要把这个路由对象呢配置到我们整个的view对象当中，所以呢，在view当中呢，有一个叫做RO的关键字，它呢是可以帮助啊我们在view的上下文，也就是说我们整个这个路由的内容啊，一定要写在这个APP里面，明白吧，因为它也是受管理的一部分啊，好，那所以呢，在view这个地方呢，我们可以把这个路由对象呢配置过来。

好，那恰好呢，我们这个router和这个啊属性的名字呢是一样的，所以呢，我们就可以把它省略掉，这样写就可以了，所以这块呢就是配置路由对象，这块呢是创建路由对象，这块呢是创建定义路由列表，这呢是定义组件模板，一共四个步骤哈。我们也管它叫挂载啊，就这个过程也叫挂载，但是无论叫嗯，不管它叫什么，总之呢，就是把它配到这好，然后接下来呢，我们呢，就可以看一看我们的最应用程序了，大家看现在我们这个应用程序的页面呢，就展示出来了，有基本信息，有演绎经历，有主要作品，然后当我们点击这个不同的内容的时候呢，它就会自动的切换到我们这个整个的不同的位置，那么同样这个地方呢，也会啊，就是类似于锚点一样啊，做一个这个路由的一个导航啊，所以当我们点主要作品的时候，这块呢是警告主要作品，当我们点演绎经历的时候呢，这块是警告演绎经历，当我们点基本信息的时候呢，这块是警告基本信息，对不对，所以这块呢，就是我们对路由的一个基本的一个实现啊，那当然未来的话，可能我们这个要用这个做我们的后台管理系统，那比如说我们后台管理系统呢，就是这样的一个页面。

然后这页面左侧呢，可能就会有一些导航了，对吧？啊，所以这就是我们定义的啊路由链接了啊，那这个导航里面可能有系统功能啊，啊什么标的管理呀，嗯，这个啊，角色管理呀啊还有这个借款管理呀，还有用户管理呀等等，然后点击不同的功能的时候，然后右侧这面会出现不同的页面，然后这些不同的页面呢，我们会通过模板来创建，那所以未来我们的这个模板呢，可能会相对复杂一些，不会这么简单啊，那既然模板复杂，那我们肯定就不能定义在这一个啊字符串当中了，肯定要把这个temp啊，要单独定义啊，要单独定义定义在哪呢？定义在单独的诶这个模板文件当中，那这个呢，我们在后面项目的时候呢，咱们再具体的去介绍，怎么去用模板文件的方式去单独的把模板提取出来啊，去定义好这块呢，就是我们所讲的路由的一个基本的一个实现。