006-尚硅谷-尚品汇-完成路由组件的搭建

哈喽，各位小伙伴们大家好，那接下来咱们呢，去完成路由组件的搭建。那首先说啊，在上面的分析的时候，哎，上面分析的时候。咱们的路由组件啊，应该有四个。分别是谁呢？就是home首页以及search搜索页以及登录，还有一个是谁啊，就是注册register reg。那所以说啊，接下来呢，咱们呢，是需要把这四个路由组件给它搭建好。那当然搭建路由组件，那咱们一定得用这个插件，就是V-router。那所以说啊，咱们呢，把咱们的项目先给他打断，去安装一下子咱们的VE route。那就是CNPM。In star杠杠save，咱们的view-R。

那咱们呢，需要等待一下，把它给它安装上。那咱们呢，在运行下，让咱们的项目给它跑起来，那首先说啊，咱们先看一下的package点杰森当中有没有安装上咱们的VE-rooter。OK，是已经安装上了，而且呢，VIVO root最新版本的是3.5.3版本，而且还加入了pro。对吧，那所以说啊，咱们的项目呢，也能正常跑起来，那也就是说咱们安装的这个ver是没问题的。接下来呢，有一件事儿需要注意。咱们应该知道。Components啊文件夹，这个文件夹经常，哎放置的是非路由组件。或者是项目当中共用的全局组件。而咱们的路由组件一般呢，是放在pages或者叫做views文件夹里面。

那这个文件夹放什么呢？那就是经常放置咱们的路由组件。所以说这个文件夹你可以叫pages，或者叫views都可以。所以说啊，咱们呢，需要去新建一个文件夹。当然这个文件夹呢，咱们叫做pages，那这里面啊，将来放置的就是咱们的路由组件。那路由组件呢，一共有几个呢？一共是有四个，谁先说有谁呢？有home首页。以及还有搜索，那就是search。以及呢，还有相应的登录与注册，那所以说咱们再来两个文件夹。分别的是登录locking。以及呢，还有咱们的注册register re GIS注册，那所以说这是咱们的四个相应的路由组件。

那当然啊，咱们目前啊只是新建的文件夹，那咱们呢，还是需要把这些路由组件给他写上。比如说这个，那咱叫index view对吧，给他来一个模板，以及这里面呢，为了区分，那这里呢，老师先写上一句话，比如说我是首页。对吧，哎，我是首页。那以及啊，还有咱们的这个lock in对吧，那这个咱们也给他拷贝一份，那当然这里面得换一下名了，我是登录。对吧，那以及还有注册那这块呢，咱也换一下文字，哎，我是注册，那以及呢，还有相应的搜索路由，那这里咱也改一下文字，我是注册。好了，那这四个路由组件已经有了，那咱们呢，就给它关闭一下。那接下来呢，要注意一件事，咱们接下来需要配置路由，哎，配置。

路由，那首先说配置路由啊，一般都放到router文件夹当中，这件事需要注意。也就是说啊，项目当中配置的路由，那么一般放置在放置在哪呢？放置在router文件夹中。对吧，路由器。那所以说啊，咱们呢，还得新建一个文件夹叫做router，那当然咱们呢是需要在这里去进行配置路由。那咱们呢，给它新建一个对吧，比如说叫做index.gs哎，index.gs。那这里呢，就是咱们配置路由的地方。对吧，哎，配置路由的地方。那首先说啊，你需要引入vuee以及Vue router，因为VE router啊，它是一个vuee的一个插件，你需要使用Ve.u方法使用一下这个插件。

那所以说啊，咱们呢，先引入咱们的vouee，哎，For谁呀voe。以及呢，还有咱们的路由插件viewe rooter，那咱们也引入一下子import，叫做viewe。Router from从哪里引呢？那就是杠。Router。但是别忘记了，你需要使用插件，哎，使用。插件，而且呢，在咱们前面的基础课程当中啊，咱们呢也讲过叫做自定义插件，所以说插件在用的时候，千万别忘记需要使用view.use方法咋的，是不是使用一下viewer。对不？哎，所以说这里呢，要注意一件事。

那底下呢，就是咱们的配置路由了。那首先说配置路由，你需要对外暴露一个叫做Vue router类的一个实例。那咱们呢，暴露一下。Default。谁呢？New一个view router类的一个实例，那当然这里面呢需要配置对象。那这里面呢，就配置咱们的路由，哎，配置路由叫roots，那当然路由有很多，右侧呢应该是一个数组，数组里面所装载的是对应的每一个每一个路由。对吧，那咱们呢，配一下子。那首先说首页应该有路由，那所以说啊，引入咱们的路由组件，哎，引入咱们的路由组件。那谁来说都有谁呢？有咱们的home首页对吧？From应该是谁呢？是at杠应该是咱们的，呃，Pages下的这个home，哎，Page pages下的这个home，那咱们呢，先配一下的，看一下的O不OK。

对吧，那首先说这里面呢，就是路由信息了，那第一个就是PA路径，为什么呢，为杠后，那以及是哪一个组件呢？那就是咱们的home呗。对不，那除此之外还有谁还有呃，这个搜索啊登录啊注册，那咱们都配一下，那就是import色。I应该是从咱们的A-pages下的这个search引进。对不一定要注意单词千万别写错了，那所以说啊，咱们这里面呢，也需要再配一个路由，就是谁呢搜索的。那这里啊，当然咱们呢，是需要改吧改吧人家的这个路径的，对吧，那这个是谁是色。

那当然这块的路由组件就是谁呢？就是search。那除此之外还有登录注册，那也引入一下import。咱们的这个叫做登录for wrong，那应该是I的杠pages下的这个log in，那当然这块呢还得配一个路由。对吧，而且呢，目前配置的都属于几级路由呢，都属于一级路由，如果有二级路由，那当然就会出现children了。对吧，那所以说啊，咱们呢，接下来接着去配一下，那这块呢，咱们再给他拷贝一份。啊，那这里是谁呢？是咱们的登录，那登录呢，那就是log呗，哪个组件login组件。对吧，那除此之外呢，还有一个就是咱们的注册，那就是inport re git front，从谁那引呢？应该是I的杠。

Pages下的这个R。EGIS。对吧，那当然还有一个路由，咱们呢也配一下，那就是PA，为什么呢？杠sea啊，应该是re GIS tr以及哪一个组件comp哪个组件，当然就是咱们的这个注册的这个组件了。对吧，叫regs提样。但是呢，这块呢要注意一件事，你目前只是在rootor文件夹里面写了一个index.js文件，相当于note当中的一个模块。你虽然配置了很多，也对外暴露了，但是你要注意你需要让这个文件是不是执行一次。对吧，所以说最后的这个路由啊，千万别忘记了，咱们呢，是需要回到入口文件这里进行注册注册的，所以这块呢，咱们写一下子就是引入路由。

那就引一下呗，Inport，注意单词是小写的router从谁那引呢？At杠，呸啊，应该是at特杠咱们的router。对吧，那以及这块呢，也需要进行啥呀，进行注册注册路由，哎，注册。路由咱们访问一下叫什么呢？就是咱们的这个router这块呢，一定要注意单词是什么，写的是小写的，千万别大写。OK吧，底下的写法，底下的写法是什么呢？是KV一致。I省略V，而且要注意router的R是小写的。那这里呢，咱们配完路由之后啊，咱们呢可以刷新你看一下。比如说我要访问后，你看有吗？它根本没有对吧？我要访问登录lock in，你看它有吗？他也没有，为什么呢？因为咱们应该知道你的路由组件是需要有一个出口的，就是在哪儿进行展示。

那所以说咱们的这些路由当然是需要在跟组件这块是不是要进行展示。那所以说找到咱们的根组件app.view那在hi与负之间，咱们需要书写啥呢？书写路由组件出口的地方就是在哪显示，当然用的是哪个组件呢？叫做router gun view。对吧，那咱们呢，这回呢，再回首测试一下，你看成没成功，比如说登录，你看是不是登录对吧，比如说你是home，那当然是不是就是首页对吧，那所以说咱们的路由配置的是没有问题了。但是咱们呢，得做一个总结。老师呢，把这块呢都给你关掉，咱们呢需要做一些总结，5.21个小总结。

首先说第一件事儿。就是路由组件，哎，路由组件与非路由组件的区别。对不？那首先说第一个区别是什么？就是路由组件一般哎是放置在呃这个pages或者叫做views文件夹。对吧，Views文件夹中。对不对，对吧，这块要注意，而咱们的非路由组件，那么一般是放置在complements文件夹中。所以说以后在打开项目的时候，你看到complements里面放的一般都是非路由组件，而你放在pages或者views文件夹里面的一般都是路由组件。对吧，这块要注意一下，第二个区别是什么呢？就是在使用的时候。

那么路由组件啊，一般需要在root文件夹中进行啥呀，进行注册。他使用的时候使用的即为组件的名字。啥意思呢？也就是说路由组件一般是和view router一起使用。而且你在用的时候呢，一般用的都是这个组件的名字。对不，而非路由组件在使用的时候呢，要注意就是非路由组件在使用的时候，一般呢，都是以哎标签的形式使用。对吧，就比如说咱们的heer，比如说咱们的fer，那这不就是非路由组件。而你的路由组件是不是在路由出口这里进行展示，而你在页面当中根本就没有使用使用过标签，你使用的只是它的名字而已。

对吧，这件事儿要注意。而且呢，咱们呢，刚刚呢，写了一行代码在哪呢？在入口文件当中，在这儿。这一行代码呢，你要注意他做了一件什么事，他是注册咱们的路由信息，但是你要明白他另外的一件事是什么呢？就是当这里书写router。的十号的十号，那么组建。哎，身上那么都拥有，拥有谁呢？拥有Dollar来写下Dollar root和Dollar router属性。对不，哎，到了root属性。对吧，那这里呢，有的同学呢，可能区分不开，这个老师也写一下吧，就是这个Dollar root。它是什么呢？他们一般，哎，一般是获取路由信息的，对吧，比如说路由的路径啊，P参数啊，参数啊等等等，一般是通过Dollar router。

啊，去获取啊，Root，还有是谁呢？组件身上的这个叫做router路由器。这个一般干什么呢？一般进行编程是导航进行路由跳转。对吧，比如说push，比如说。而且咱们有的时候会问，你说push与replace有什么区别啊，对吧，那说白了就是能不能记住历史记录。所以说呢，咱们呢，可以去看一下咱们相应的路由，就比如说目前是首页，你看首页这个路由组建的身上，你可以看一下它有没有相应的Dollar root属性。是不是有了，你是不是能看到路由的一些信息啊。对不？当然非路由组件身上它也有导入入的属性，这块要注意对吧，所以说呢，这块呢，要注意选项三就是注册完路由，哎注册玩哎玩路对吧，你不管是路由组件，哎不管是路由。

组件还是非路由组件对吧？那么身上都有什么呀，Dollar root。和谁呢？和Dollar router的属性它不像谁呢？不像react。React当中的非路由组件啊，如果你想获取到路由的那些信息，你得用那个with root对吧？所以说E的项目当中，不管是路由组件还是非路由组件，它的身上都有Dollar root和Dollar router属性。对吧，那么当然啊，咱们这里面呢，你不能让用户手动的输入，而且你还要注意一件事什么事，当你访问咱们这个网站的时候，你看啊8080默认它应该展示的是谁，展示的应该是首页。

对，不要不然你现在的K比不上任何的V，所以说什么内容都没有。那所以说啊，咱们在配路由的时候，这里面呢，给它来一个重定向。对吧，就是重定向搞一下啊，什么叫重定向呢？写一下叫做重。定向就是在项目啊，跑起来的时候，跑起来的时候对吧，当你访问斜杠的时候立马。哎，立马。哎，让他。定向到哪呢？定向到咱们的首页，所以这块呢，咱们要写一下子，比如说PA。对吧，比如说你访问的是呃这个这个这个这个根对吧，或者是星，它都可以任意目录对吧，你让他定向到哪呢？Radio RA定到哪定到咱们的这个呃，Home当中。对不啊，那咱们呢，先看一下子刷新试一下对不对啊，当然咱们的这个语法应该是出现错误了，对吧？应该是谁啊，应该是写路径，应该是杠后。

那所以说啊，咱们的刷新你看一下子，就比如说老师现在要访问咱们的这个项目。对不，当你一访问8080的时候，OK，我直接定向到后这。因为咱们的项目你应该知道，当用户一访问的时候，首先访问的是首页。对吧，所以说这块要注意一下，那以及当然啊，当你点击登录按钮的时候，就点击头部按钮啊，这个登录按钮的时候，你应该进行路由跳转。跳转到哪呢？跳转到登录页，那你点注册应该跳跳到注册页面。对吧，那所以说那这里呢，老师呢，也做一下笔记。啊，那这块呢，咱们也做一下笔记，五点几5.3路由的跳转。

路由的。跳转，那首先说啊路由的跳转。路由的啊，跳转有两种形式。一种呢，是声明式导航，叫做root-link。这玩意儿可以干什么呢？哎，可以。进行路由的。跳转对吧？啊，以及还有一个就是什么呢，编程式导航。这老师也写一下，就是这块有个什么呢？还有个叫做编程式导航。对吧，就是利用咱们的push或者是place进行跳转，对吧，哎，可以。进行路由的跳转。那有的同学可能会问，那老师以后在项目当中到底是用router link还是push replace啊，这玩意儿很简单，虽先说，呃，边城式导航，哎，编程式AA写一下叫做边。

城市导航对吧，就你就记住就是声明是导航能做的，声明是。导航能做的，那么编程是导航都能做。但是编程式导航除了可以咋了，可以进行路由。跳转还可以怎么呢？还可以做一些其他的业务逻辑，哎，其他的业务逻辑。对吧，哎，就举个例子，就比如说你看这儿，就比如说就假如说咱有一个登录页面有一个文本框。对吧，输入用户名，再来个输入密码，底下有个登录，那你点击登录这个按钮，你要注意你用root link能行吗？不行为啥，当你点击登录的时候，你看咱别人说咱搁这看。你看就比如说这里这块有用户名，这块有用有密码，当你点击这个登录按钮的时候，你是要进行路由跳转的。

但是你想想在路由跳转之前还有没有别的业务，那指定有啊，你要收集用户名密码，一点击OK发请求，如果登录成功，OK再进行路由跳转，所以说像这种情况你就可以采用啥呀，采用编程式导航。那就说编程式导航，它里面还可以做一些其他的业务逻辑。对吧，那所以说咱们呢，先把咱们这儿先给他搞一下子，比如说找到咱们的这个hier组件，咱们找一下。找到咱们的hier组件看下这，那也就是说如果你点击的是登录，OK，你应该跳到登录页面，那这里咱就只是跳过去，也没有别的业务，咱就用谁了，Router杠定。对，不，但是一定要注意，这叫登录啊登录。但是呢，一定要注意router link。生命式导航。

声明是导航，它务必要有兔属性，就是往哪儿跳，哎属性。所以说咱们呢，给它加一个往哪跳，往咱们的登录页跳，那就是to。对吧，往哪儿突，那是不是就是杠lock。那以前还有个叫免费注册，那当然咱们这里也给他换成谁router。啊到。Link对吧，那以及后面这咱也给它换一下叫做router，哎杠link，当然咱们这块就不需要her。对吧，该有的类名也得有，因为咱们应该知道，编程是导航，就root link实指就是个A标签。对吧，所以他也得有相应的钥匙，那以及咱们吐往哪吐呢，是不是注册，那就是杠re GIS提样，那咱们呢，先测试一下，你看啊。现在老师一访问咱们的网站，上来访问的是啥呢？是首页。这没问题，去登录哎，去免费注册，这都没问题。

对吧，以及你点击这个图片，就点击这张图，你应该展示的是首页。对不，那所以说咱们找到这个logo就这啊，也就是说你当你点击这个图的时候，你应该往首页跳，它外部放的是一个啥，放的是一个A，那咱们就给它换成router-link就行了。对吧，那这块也给它换成谁router哎，杠。那当然啊，对于咱们的root-link，它实质也是个A，但是要注意它也有样式，所以class咱们也留着，当然title咱们就不要了，以及her，还有target target是打开一个新的网页，这些都没必要，因为咱们只是单页面。对吧，那所以说往哪跳，那就是吐往哪跳，说往咱们的首页跳，那就是杠后。那咱们呢，保存一下子，看一下子是不是跳到首页登录是不是去首页。对吧，所以说这三个声明式导航OK没问题。

那接下来呢，还有一个地儿，就是当你点击搜索按钮的时候，你应该进行路由跳转，你应该跳转跳到四个职业。那所以说咱们找到这个按钮也是在hi这啊，找到这个按钮叫搜索。那咱们看一下。就这的对吧，他写的是一个button，而且将来啊，咱们也要收集用户输入的东西，对吧，比如说你输入小米一点击八经路由跳转，还要穿参。那这里咱们就尝试用一下什么呢？用一下编程式导航。对吧，比如说I click。那当然，那这块咱要干什么，是不是要去跳往色那就要勾色。那当然，那咱们这里呢，得写上它相应的方法，Method。对吧，那这块呢，老师呢，也做一下笔记，那这块咱做一下笔记是啥呢？是搜索，哎搜索按钮的回调函数干什么呢？它是需要像像谁呢，像这个色路由。

哎，陆游。进行。跳转。那所以说那咱们写一下子就是Dollar route。对不？咱们刚刚配路由的时候，咱说过组件实力身上是有这个Dollar router属性，对不，点谁点push往哪push的，应该是咱们的杠色进行跳转。那所以说咱们回首，哎，当然这块呢，咱的这个函数名还没写呢，是吧，只是做了一下这个这个这个这个笔记go search。对不，所以说那咱们呢，去看一下，这样老师呢，也给他格式化一下，看一下，就比如说目前是首页。对吧，比如说用户输入一个关键字叫做哈哈哈，对吧，当你点击哈哈哈的时候，OK，进行路由跳转，跳到谁，跳到色置，当然咱们现在这个点数明显没有跳过去，所以说应该是程序出现了问题。

勾色是单词写错了。一定要记住单词千万别写错啊ER，因为对于初学者，很多初学者犯的错就是啥单词错了，但是单词错是很难找的，而且初学者他还不知道打开控制台对吧，不知道打开开发者工具，所以说写的时候一定要注意频繁的看控制台，看开发者工具。对吧，所以咱们点击这个按钮进行路由跳转，OK是没有问题的。那所以说到现在为止，咱们完成了路由组建的搭建。