[JavaScript从入门到放弃系列] 高级篇10.是时候用Vue.js来写前端了（路由1）

Posted 2021-05-01 课工场大前端

上一篇《》我们学习了组件的插槽，组件的常用功能就到此告一段落，更高级的还是要各位自行去官网学习。我决定还是不要再跟着写”xx下“篇了，要不然不方便整理，看标题都不知道具体讲了啥。

本章我们来学一下Vue中的路由（ vue-router）。

很多人可能还不知道，路由到底是什么鬼？是路由器吗？其实各位如果学到了Java框架或者ASP.NET MVC 就知道了在程序中路由其实就是http请求啦。虽然不严谨，但你就这么理解吧。比如你当前访问的页面的路径，就是一个路由。

通过前几章的学习，我们已经可以在Vue中通过组合组件来拼成一个模块了，那么我们现在把路由加进来，把每个页面都写成一个组件，然后将组件(components)映射到路由(routes)，最后告诉 vue-router 要在哪里渲染它们。

举例：

首先html:

注意，这里引用了两个JS，大家可以自行去官网下载，一个是Vue的核心库，另一个则是Vue的路由库，只要引入这两个文件，才能正常的使用Vue路由。

Ps:暂时不要考虑工程化，虽然你不知道啥叫工程化

看下代码，你一看到那个什么router-link就懂了，组件嘛对吧？！

那个to就是我们说的props传值嘛对吧。所以如果你前几章有点懵逼，也是没关系的，主要是为了能看懂后面的东西，说到底，多练一练，问一问，总会好起来的。

而那个router-view则是一个窗口，通过路由请求匹配到的组件，都会呈现在这个router-view中。会生成一个div。

OK我们再看下JS怎么写：

注意，

第一步创建组件，如果你看了我前面写的的ES6的文章，就知道这里const是定义常量的关键字。然后那个Foo和Bar作为组件，如果写的复杂的话，可以单独写个文件，然后 import 进来的。这里为了方便就弄得简单点。

第二步是创建路由列表，数组， 每个路由也就是路径，应该映射一个组件。 其中"component" 可以是前面写的Vue.extend()方式创建的组件，也可以是直接一个普通的组件配置对象。

第三步是创建VueRouter对象，然后将路由列表塞进去，如果你学过ES6，就知道如果变量名和参数名相同，则可以直接写一个就行。

第四步是将这个路由对象，注入到Vue实例中，然后挂载到作用域中，也就是那个el指定的那个容器。其实我试了一下，不用那个$mount()，直接在里面像之前那样指定el属性好像也可以，具体区别暂时还不知道。

OK我们看下效果，一个简单的单页应用就这样成功创建了：

当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值  .router-link-active

这个样式我们可以自行编写，毕竟Vue不知道我们网站到底是啥风格嘛，太贴心了。

其实用JQuery也能做这样的事，无非就是约定统一请求规则，然后使用html()方法替换内容文本嘛。原理大差不差，不必改到惊奇。当然Vue的路由的实际做法可能更复杂，随便了随便了。

路由就此入门了，后面还会有几章等着大家。

如果觉得这篇文章对你有帮助，不妨顺手关注+点赞+转发传播给更多想要进步的人。

PS：

青鸟中博的第一个ACCP前端班，晚上6.3~8.30，保证一定都是干货。经过宣传大家都很踊跃，剩余名额不多了，速速找我报名吧。微信：18305181376  QQ：674254975