vue dashboard可配置设计

使用了插件，然后呢把路由配置了进去啊？按照这个写有效果吗？没有任何效果。为什么没有效果呢？他还有很多信心，他不知道，根本就不知道，你要干嘛？我现在只是系统里边有了，我有这个插件了啊，但是呢，我怎么来去显示不知道，你看他还有这些信息知道吗？一个都不知道，我怎么来？根据不同的地址来匹配不同的组件， 你要告诉他呀，这个地址匹配哪个组件？你要告诉他呀，你没有告诉他怎么知道匹配呢？另外一个匹配到了他放到哪个区域呢？也不知道，所以说呢，他还有很多信息不知道。那接下来怎么用，怎么办呢？我们要讲一讲这个路由的基本使用啊，就是把这个信息告诉他。 首先有两个关键信息要告诉他。第一个关键信息呢，就是什么路径匹配什么样的主见，你这个信息必须要告诉他，那么这个信息怎么来告诉他呢？就是写到这，写到配置这里。好，那么这个配置这里怎么写呢？它里边又包含了一个配置，叫做 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， 那么这个玩意就是我们的配置啊，这是路由匹配规则，路由匹配规则，好了，这样带法是不是变得更加清晰了一点，对吧？好，走这一块啊，效果当然是完全一样的，看一下首页，对吧？效果完全一样，没什么区别。