粉丝5986获赞2.7万


使用了插件,然后呢把路由配置了进去啊?按照这个写有效果吗?没有任何效果。为什么没有效果呢?他还有很多信心,他不知道,根本就不知道,你要干嘛?我现在只是系统里边有了,我有这个插件了啊,但是呢,我怎么来去显示不知道,你看他还有这些信息知道吗?一个都不知道,我怎么来?根据不同的地址来匹配不同的组件, 你要告诉他呀,这个地址匹配哪个组件?你要告诉他呀,你没有告诉他怎么知道匹配呢?另外一个匹配到了他放到哪个区域呢?也不知道,所以说呢,他还有很多信息不知道。那接下来怎么用,怎么办呢?我们要讲一讲这个路由的基本使用啊,就是把这个信息告诉他。 首先有两个关键信息要告诉他。第一个关键信息呢,就是什么路径匹配什么样的主见,你这个信息必须要告诉他,那么这个信息怎么来告诉他呢?就是写到这,写到配置这里。好,那么这个配置这里怎么写呢?它里边又包含了一个配置,叫做 road 啊,就这个 配置,这个是什么配置呢?就是路由配置,这是配置的是一个数组,数组里边每一项就是一个规则。什么叫规则?就是什么路径对应什么组件,什么路径对应什么组件,就是一个规则。好,那么咱们呢?这里怎么来写呢?规则,一个规则就是一个对象, 比方说第一个规则,我给他写一个 test, 当你访问这样的路径的时候,一个斜杠啊,我们路径是一个斜杠的时候,那么匹配到什么组件呢? component 匹配到一个组件,这个组件呢?我们导入进来啊,呃,比方说这里面导入 import home from, 点个斜杠 will use home, 对吧?是不是达到这个组件呢?哎,我就把组件放这高速无忧,当我访问这样的路径的时候,你给我匹配这个组件。好,那么这个规则是不是一共有五个?好,你看是不是配置好了路由了?不同的访问路径匹配不同的组件,写完了吗?那么这个配置就写 好了啊。这路由的配置好,再我们来刷新一下,看一下。有效果吗?还是没效果?为什么还是没效果呢?还有些信息不知道啊,还有什么信息?现在能不能匹配了?能匹配了,匹配到放哪了?他不知道放哪,对吧?把这个主键放哪了?他不知道往哪里放, 哎,那么我们这个放哪怎么写呢?那么我们要找了啊。 mate gs 启动的是哪个组件?启动的是它对不对?在渲染是它,在无忧的渲染过程中,它只要渲染到一个特殊的组件,叫做 root of you, 只要宣传到这个组件的时候,那么就表示这个区域呢是一个站位区域,他将会路路由呢?将会把匹配到的组件放到这个位置,他就是个站位啊,有点类似于插槽啊,实际上内部呢就是使用了插槽,呃,进阶的时候,那么再说, 那么现在我们就可以认为只要匹配到了组件,他就放到这个位置。哎,那么我们看一下这个中间主区域,这个区域是不是就说我们要放我们什么?放我们匹配到的页面组件啊?因此这里可以。怎么 可以就是一个 rotor? 有哎,有同学说了,老师啊,你这里为什么没有去注册组建呢? 是因为你在安装这个插件的时候啊,他就给你全局注册了一个组件,这个组件谁提供的?就他提供的啊,因此呢,你可以直接使用 好,那么这是一种写法啊,当然呢,也可以用什么短横线命名法都可以啊,我现在这样子写也可以用这种方式啊。不用,以后呢,你可能看到这种方式啊,稍微多一点啊。呃,这是官方文档啊,官方那个视力里边用的是这种写法啊,所以说市面上的这种写法可能要多一点,但是呢,我个人比较喜欢驼峰命名法啊。看你自己都一样, 好保存啊。咱们来看一下,当我们一开始访问的路径是斜杠的时候,是不是首页,对不对啊?这一块。那你看这个逻辑是不是通了,基本使用非常简单啊,这个逻辑是不是通了,请求不同的路径,得到不同的主见来进行宣传。哎,但是有一个小的问题,你看到没,这里的路径为什么多一个井号啊? 奇怪了,对吧。是因为啊,默认情况下他读路径啊,他不会从这里读,他是从井号后边读路径。井号后边是啥?是我们把它叫做某链接,对吧?其实呢,也还有个名字叫做哈西,就是 ok 型里边的哈西, 你看哈西值,他就从这个井号后边去读读景,也就说我们这个改变哈西是不是可以改变改变他的页面?比方说我们可以改变 location, 把哈西重新复制啊,复制为一个 blog。 七杠啊, blog 你看是不是切换到文章了, 而且呢,因为因为是哈西直,哈西直的切换,某链接的切换会不会刷新页面?不会刷新页面,这就是无刷新跳转,说哈西直是最容易做无刷新跳转的,明白这意思吧,他默认使用使用了哈西直啊,也说我们这里访问 vlog 可不可以访问到文章?可以啊,因为访问这个路径的时候,你看我们整个流程,所以匹配到博客 组件在哪?怎么匹配到不合组件的?是不是因为在这里?因为到这里呢,我们定了一个配置,对吧? blog 还匹配到这个组件,他把组件渲染到哪呢?渲染到这个位置啊,只有他的整个过程。 那么我们再来从在这里直接输一下啊,比方说我们 message 回车匹配到留言版,看到没?这就一整个基本流程已走通了。 关注读一剪辑号的同学插播一下,我是袁老师,你能跟着我学到这里,那么我就再送你一个好东西。为此呢,我录制了一套大师课, 这里边一共六个章节,每一节都是你求职比面试和在职提升必须必备的东西, 像什么世界循环啊,浏览器渲染原理啊,属性描述符啊,还包括几个经典的实战功能案例,甚至唯有的原骂思想拆解等等等等。我坦率的讲,凡是里边涉及到的知识,诠释的深度 都达到了圆码的级别,你基本找不到第二个人能剖析到这种程度的。也就是说,一旦你比面试或者工作当中遇到了这些技术,你表现出来的水准在其他的竞争者中有着压倒性的优势。 关注袁老师这么久了,我也帮不上别的忙,那么这套大师课呢,算是袁老师送给你们这份大礼,不必客气。如何领取?评论区第一条,进咱们的粉丝群,然后根据提示领取就可以了。 好,那么这个东西如果说你理解了过后呢,我们现在呢,把代码稍微优化一下,你看,我们现在启动文件里边代码开开始慢慢的变多了,我还是希望呢,启动文件呢,尽量保持简洁,因此呢,我们这一块代码呢,可以把尽量抽出去,怎么抽出去呢?其实我们要抽出去的是不是就是这一坨, 就把这一坨代码最终得到一个 rotor 配置到这就完事了,对吧?那我们怎么来弄呢?我们可以到这个 s r c 里边在线的文件夹啊,叫做 rotor, 那么 rotor 里边我们新建一个 index, 稍微再切分一下,我们就把刚才那段代码啊,就这一坨 扔过来。然后呢,因为这里要用,用到这个 view go 函数,所以我们导入这个 view go 函数啊,是吧? view 好,然后呢,把这个 rotor 导出 export deport rotor, 把它导出好了,那么这个东西把分成不同的模块之后呢?没点 gs 是不是直接导入这个 rotor 就完事了,是吧? 有头,对吧?默认导入的就是应该是比较结实,路径变了,对不对?这个路径变了啊,这里要返回上级目录啊,或者使用艾塔也行,保存 效果是不是完全一样的,对吧?好,这里改成斜杠手一好啊。当然如果说你访问不到任,如果说都没都没有匹配的话,那么他就什么都没有匹配,这个组组件是空的,没有任何组件选到这个位置,嗯,然后呢?现在呢,我们还需要继续优化一下工程,因为 这里边的,你看这里这个代码比较多的地方,是不是在这,对不对?这里是一个主,就是路由的匹配规则啊,路由的匹配规则,那么我可以单独的把路由匹配规则分分出去啊,因为有模块化嘛,对吧?就可以尽量的细分,肉质比较结实。好,那么这个玩意这个地方就是导入一些 路由的匹配规则,把这个玩意放过来,嗯,把这个玩意 roads, 这里就是导出一个数组, export eport, 导出这个数组,对吧?就导出一个路由匹配规则。好,那么这边呢,我们只需要把路由匹配规则导入进来啊, import roads from their roads, 那么这个玩意就是我们的配置啊,这是路由匹配规则,路由匹配规则,好了,这样带法是不是变得更加清晰了一点,对吧?好,走这一块啊,效果当然是完全一样的,看一下首页,对吧?效果完全一样,没什么区别。


