day05/下午/101-尚硅谷-尚融宝-锚点和路由的概念

那首先呢，我们来创建一个文件目录，叫零七。我们在这块创建吧。叫零七。Router pro吧，好，然后接下来呢，在这个07ROUTER里面呢，我们因为它这个view router呢，它是基于view的啊，所以呢，我们得先必须复制view的这个JS文件啊，然后呢，再复制view root的JS文件，所以呢我们先找到view的JS文件。从上面吧复制一个，所以这个就体现出了渐进式框架的一个好处，你需要的时候呢，你就加载它，你不需要的时候呢，你就不加载它啊，那现在呢，我们需要这个router啊，所以呢，我们把它找到。

然后呢，这有个不用root，同样呢，它也有两个，一个压缩版，一个开发版，然后我呢，就把这个开发版复制过来。还是要拖一下。好。这样都有了，然后接下来呢，我们在这个里面呢，去创建一个页面啊，然后呢，先把这个页面的基础结构呢给它写上，我们再来看一看，比如R，它到底是做什么的。所以呢，在这面呢，我新建一个文件，还有这文件呢，就叫index.html吧。啊，那当然了，我也是啊，要建view的一个结构的，所以呢，先把这个DEMO里面的内容呢，也是先考过来，好，这是我们的view的一个基本的结构，那么我们来说一下这个路由是什么啊，首先咱们来明确一下这个路由的概念，然后root就是路由的意思，那么我们打开一个百度吧。

好，比如说我搜一个人就搜贾玲。然后呢，这里面有，嗯，百度百科是吧，咱们就点进去看。好，然后在这个百度百科里面呢，我们可以看到这个是啊贾玲的一些基本介绍，然后在下面这个地方有一个目录啊，这目录里面呢，有早年经历，演艺经历，社会活动，主要作品，获奖记录，人物评价人影响哈，我们点其中的，比如说获奖记录，你会发现呢，他直接就会跳转到获奖记录里面来，而且呢，我们当前的这个页面呢，其实并没有跳转它，只是呢，在当前的页面当中做了一个呃定位，比如说点成功评价。

好又做了一个定位，然后呢再回来，回来之后呢，点社会活动，好又做了一个定位，所以所有的内容实际上都在这个页面当中，我们管这个东西叫什么呢？叫锚点。叫锚点啊呃，所谓的锚点呢，就是我们在这个地方呢，设置一个啊，就是一个标识，比如说演绎经历这块。我在这个地方点演绎经历，好点演绎经历，那我们就跳转到这来，为什么会跳转这来了呢？因为这块有个锚点，我们F12看一下。在演艺经历这个里面呢，有一个。它自己定义了一个锚点属性啊，然后它的值呢是二啊，然后呢，你会发现浏览器的地址栏当中呢，也有一个叫做井号二的，实际上这个井号二呢，就帮助我们将页面呢，跳转到了这个演绎经历这个锚点当中啊好，那这块呢，就是这个锚点啊啊这对这块是演绎经理对吧？好然后接下来呢，我们再来看其他的一些锚点。

比如说呢，我们回到前面的这目录当中，我们点这个人物评价啊，人物评价这块呢叫七，所以人物评价相对应的也应该有一个锚点，肯定是叫七。你看这名叫七对吧，所以这就是锚点，好，这个锚点可以帮助我们实现什么呢？实现一个单页应用，也就是说整个应用程序当中的所有的内容都在一个页面当中展示，然后我们通过这个锚点来进行一个定位啊，那么路由是什么呢？路由实际上就是一个锚，锚点的升级改良版啊，也是类似锚点的这样的一个一个一个定位属性，然后呢，我们把它追加到URL地址栏的结尾这个部分啊，通过这个定位属性呢啊，我们就知道我要展示具体的哪个页面的内容了，当然了，路由和锚点的不同呢，在于锚点呢，是页面当中的所有的内容都事先定义在了页面当中，然后呢，我们就去啊定位就行了啊，其实就是在页面当中来回滚动啊，做这样的一个定位好，那路由是什么呢？路由就是我们这个页面的内容啊，它不是事先定义好的，不是事先定义在页面当中的啊，或者说它不是事先显示在页面当中的，那我们可以通过锚点呢，去动态的把需要加载。

的内容动态的加载到页面当中，那么实际上我们的页面的本质呢，也是一个单页应用，就是页，就这么一个页，但是页里面的内容可以动态的被加载进来啊，如果我想访问七，那我就加载七相对应的这个数据内容到我们的页面当中，如果我想访问六，那我就加载六啊的数据内容到我们的页面当中，它这个有什么好处呢？就是使我们的页面呢，不至于滚动条太长啊，你想看什么就现加载什么，不看的呢，它就直接啊给你隐藏掉了，或者是说直接就不去加载了啊，所以呢，这个就是路由的一个概念了啊，那我们来看一看啊，使用我们的这个view怎么样去啊，实现刚才我们所说的这样的一个单页应用当中，通过这样的一个特殊的URL字符串，然后呢，去动态加载啊，页面当中不同的内容哈，好，这就是我们的一个目的。