每周三集前端免费视频
每年帮助超100万前端爱好者学习

技术胖的Vue-router视频教程

简介:

由于Vue在开发时对路由支持的不足,后来官方补充了vue-router插件,它在Vue的生态环境中非常重要,在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么?这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。

有的小伙伴会有疑虑,为什么我们不能像原来一样直接用<a></a>标签编写链接哪?因为我们用Vue作的都是单页应用,就相当于只有一个主的index.html页面,所以你写的<a></a>标签是不起作用的,你必须使用vue-router来进行管理。

如果你在学习中有什么疑问,欢迎您在博客中留言,或者加入Q群:364140450,有很多Vue的高手在群里互动。

课程目录:

 

第1节:Vue-router入门

安装vue-router

vue-router是一个插件包,所以我们还是需要用npm来进行安装的。打开命令行工具,进入你的项目目录,输入下面命令。

如果你安装很慢,也可以用cnpm进行安装,如果你在使用vue-cli中已经选择安装了vue-router,那这里不需要重复安装了。

解读router/index.js文件

我们用vue-cli生产了我们的项目结构,你可以在src/router/index.js文件,这个文件就是路由的核心文件,我们先解读一下它。如果你还不会使用vue-cli,我正好有一套课程是专门讲vue-cli的,你可以学习一下《技术胖的Vue-cli视频教程》。

上边的代码中已经对每行都进行了注释,其实在这个路由文件里只配置了一个功能,就是在进入项目时,显示Hello.vue里边的内容代码。

增加一个Hi的路由和页面

对路由的核心文件熟悉后,我们试着增加一个路由配置,我们希望在地址栏输入  http://localhost:8080/#/hi   的时候出现一个新的页面,先来看一下我们希望得到的效果。

看到了效果,我们看一下具体的操作步骤:

  • 在src/components目录下,新建 Hi.vue 文件。
  • 编写文件内容,和我们之前讲过的一样,文件要包括三个部分<template><script>和<style>。文件很简单,只是打印一句话。
  • 引入 Hi组件:我们在router/index.js文件的上边引入Hi组件
  • 增加路由配置:在router/index.js文件的routes[]数组中,新增加一个对象,代码如下。

通过上面的配置已经可以增加一个新的页面了。是不是觉的自己的Vue功力一下子就提升了一个档次。为了方便小伙伴查看,贴出现在的路由配置文件:

router-link制作导航

现在通过在地址栏改变字符串地址,已经可以实现页面内容的变化了。这并不满足需求,我们需要的是在页面上有个像样的导航链接,我们只要点击就可以实现页面内容的变化。制作链接需要<router-link>标签,我们先来看一下它的语法。

  • to:是我们的导航路径,要填写的是你在router/index.js文件里配置的path值,如果要导航到默认首页,只需要写成  to=”/”  ,
  • [显示字段] :就是我们要显示给用户的导航名称,比如首页  新闻页。

明白了router-link的基本语法,我们在 src/App.vue文件中的template里加入下面代码,实现导航。

现在我们访问页面,发现已经多出了导航。

总结:这节课我们在vue-cli的构建下对vue-router有了一个基本的了解,学会了vue-router的核心文件的基本结构,学会了如何添加一个新的模板页面,还学会了用<router-link>标签设置导航。在这里我必须要再强调一遍,路由是Vue中最重点的内容,你必须完全掌握学会。你可以先听一遍视频教程,然后跟着文字教程来作你的练习。一步一个脚印,我们都会成为Vue大神的,小伙伴们加油了!!!


第2节:vue-router配置子路由

我们上节课初步了解Vue-router的初步知识,也学会了基本的跳转,那我们这节课学习一下子菜单的路由方式,也叫子路由。子路由的情况一般用在一个页面有他的基础模版,然后它下面的页面都隶属于这个模版,只是部分改变样式。我们接着第一节课的实例,在Hi页面的下面新建两个子页面,分别是 “Hi页面1” 和 “Hi页面2”,来实现子路由。

一、改造App.vue的导航代码

我们需要先改造app.vue的导航代码,来实现基本的导航功能。我们用<router-link>标签增加了两个新的导航链接。

App.vue代码

这时候我们再访问主页的时候导航栏就发生了变化。多出了两个自导航:Hi页面1  和 Hi页面2

二、改写components/Hi.vue页面

把Hi.vue改成一个通用的模板,加入<router-view>标签,给子模板提供插入位置。“Hi页面1”   和 “Hi页面2”  都相当于“Hi页面”的子页面,有点想继承关系。我们在“Hi页面”里加入<router-view>标签。

components/Hi.vue,就是第5行的代码,其他代码不变。

三、在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue

新建的模板和Hi.vue没有太多的差别,知识改变了data中message的值,也就是输出的结果不太一样了。

Hi1.vue

Hi2.vue

四、修改router/index.js代码

我们现在导航有了,母模板和子模板也有了,只要改变我们的路由配置文件就可以了。子路由的写法是在原有的路由配置下加入children字段。

children字段后边跟的是个数组,数组里和其他配置路由基本相同,需要配置path和component。具体看一下这个子路由的配置写法。

需要注意的是,在配置路由文件前,需要先用import引入Hi1和Hi2。

总结:

这节课学的内容在路由配置里经常用到,比如我们作一个购物模块,购物模块里有很多相同的元素,我们就会利用这种子路由的形式,先定一个父页面,然后再修改子页面。希望这节课对你有帮助,其实子路由的步骤还是有些繁琐的,所以希望你们多练习几遍,能够完全掌握。


第3节:vue-router如何参数传递

新的项目开始了,工作量很大,所以更新会比较慢,希望小伙伴们多多包涵。

开发中,参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式,这节课我们就看看vue-router为我们提供了那些传递参数的功能。我们先想象一个基本需求,就是在我们点击导航菜单时,跳转页面上能显示出当前页面的路径,来告诉用户你想在所看的页面位置(类似于面包屑导航)。

一、用name传递参数

前两节课一直出现name的选项,但是我们都没有讲,这节课我们讲name的一种作用,传递参数。接着上节课的程序继续编写。

两步完成用name传值并显示在模板里:

  1. 在路由文件src/router/index.js里配置name属性。
  2. 模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示:

     

二、通过<router-link> 标签中的to传参

也许你也会觉的上边的传参很不正规,也不方便,其实我们多数传参是不用name进行传参的,我们用<router-link>标签中的to属性进行传参,需要您注意的是这里的to要进行一个绑定,写成:to。先来看一下这种传参方法的基本语法:

这里的to前边是带冒号的,然后后边跟的是一个对象形势的字符串.

  • name:就是我们在路由配置文件中起的name值。
  • params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。

了解基本的语法后,我们改造一下我们的src/App.vue里的<router-link>标签,我们把hi1页面的<router-link>进行修改。

把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

总结:

今天我们学习了两种传参的方法,一般会使用第二种方法。我们通过学习也知道了name的用途,一种作用是传参,一种作用是在传参时起到名称作用。传参的操作在实际开发中是基本的需求,我们一定要掌握好啊。


第4节:单页面多路由区域操作

致歉:对不起大家,一周没有更新课程,因为公司开始了一个新项目,人手比较少,所以一直处于高压下工作,回家后什么都不想干,只想躺在床上闭目养神听会音乐。今天休息,我才有时间上博客逛一下,开始继续更新。

这节课我们讲“单页面多路由区域操作”,实际需求是这样的,在一个页面里我们有2个以上<router-view>区域,我们通过配置路由的js文件,来操作这些区域的内容。例如我们在src/App.vue里加上两个<router-view>标签。我们用vue-cli建立了新的项目,并打开了src目录下的App.vue文件,在<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式。

现在的页面中有了三个<router-view>标签,也就是说我们需要在路由里配置这三个区域,配置主要是在components字段里进行。

上边的代码我们编写了两个路径,一个是默认的‘/’,另一个是’/Hi’.在两个路径下的components里面,我们对三个区域都定义了显示内容。

定义好后,我们需要在component文件夹下,新建Hi1.vue和Hi2.vue页面就可以了。

Hi1.vue

Hi2.vue

最后在App.vue中配置我们的<router-link>就可以了


第5节:vue-router 利用url传递参数

我们在第3节虽然已经学会传递参数,但是我们这些老程序员的情怀还是利用url来传值,因为我们以前在前后端没有分开开发的时候,经常这样做。在实际开发也是有很多用URL传值的需求,比如我们在新闻列表中有很多新闻标题整齐的排列,我们需要点击每个新闻标题打开不同的新闻内容,这时在跳转路由时跟上新闻编号就十分实用。

:冒号的形式传递参数

我们可以在理由配置文件里以:冒号的形式传递参数,这就是对参数的绑定。

  1. 在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。

    我们需要传递参数是新闻ID(newsId)和新闻标题(newsTitle).所以我们在路由配置文件里制定了这两个值。
  2. 在src/components目录下建立我们params.vue组件,也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。
  3. 在App.vue文件里加入我们的<router-view>标签。这时候我们可以直接利用url传值了。

我们已经实现了以url方式进行传值,这在实际开发中经常使用,必须完全了解。我希望你看完视频后或者学完文章后能多练习两边,并在实际项目中充分使用。

正则表达式在URL传值中的应用

上边的例子,我们传递了新闻编号,现在需求升级了,我们希望我们传递的新闻ID只能是数字的形式,这时候我们就需要在传递时有个基本的类型判断,vue是支持正则的。

加入正则需要在路由配置文件里(/src/router/index.js)以圆括号的形式加入。

加入了正则,我们再传递数字之外的其他参数,params.vue组件就没有办法接收到。


第6节:vue-router 的重定向-redirect

开发中有时候我们虽然设置的路径不一致,但是我们希望跳转到同一个页面,或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。

redirect基本重定向

我们只要在路由配置文件中(/src/router/index.js)把原来的component换成redirect参数就可以了。我们来看一个简单的配置。

这里我们设置了goback路由,但是它并没有配置任何component(组件),而是直接redirect到path:’/’下了,这就是一个简单的重新定向。

重定向时传递参数

我们已经学会了通过url来传递参数,那我们重定向时如果也需要传递参数怎么办?其实vue也已经为我们设置好了,我们只需要在ridirect后边的参数里复制重定向路径的path参数就可以了。可能你看的有点晕,我们来看一段代码:

已经有了一个params路由配置,我们在设置一个goParams的路由重定向,并传递了参数。这时候我们的路由参数就可以传递给params.vue组件了。参数接收方法和正常的路由接收方法一样。


第7节:alias别名的使用

上节学习了路由的重定向,我相信大家已经可以熟练使用redirect进行重定向了。使用alias别名的形式,我们也可以实现类似重定向的效果。

1.首先我们在路由配置文件里(/src/router/index.js),给上节课的Home路径起一个别名,jspang。

2.配置我们的<router-link>,起过别名之后,可以直接使用<router-link>标签里的to属性,进行重新定向。

redirect和alias的区别

  • redirect:仔细观察URL,redirect是直接改变了url的值,把url变成了真实的path路径。
  • alias:URL路径没有别改变,这种情况更友好,让用户知道自己访问的路径,只是改变了<router-view>中的内容。

填个小坑:

别名请不要用在path为’/’中,如下代码的别名是不起作用的。

在实际项目中我们遇到了这样的坑,开始以为是自己的代码写的有问题,找了两个小时作用。后来发现不是代码问题,只是vue不支持这样使用。我们犯过错误,踩过了坑,希望大家就不要踩了。


第8节:路由的过渡动画

在开发中有一种需求叫高端、大气、上档次。所以作为一个大前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果,提升我们程序的动效设计。这节课我们就学习一下路由的过渡动画效果制作。

<transition>标签

想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性。

我们在/src/App.vue文件里添加了<transition>标签,并给标签起了一个名字叫fade。

css过渡类名:

组件过渡过程中,会有四个CSS类名进行切换,这四个类名与transition的name属性有关,比如name=”fade”,会有如下四个CSS类名:

  1. fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除。
  2. fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除。
  3. fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。
  4. fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。

从上面四个类名可以看出,fade-enter-active和fade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。

那我们就在App.vue页面里加入四种CSS样式效果,并利用CSS3的transition属性控制动画的具体效果。代码如下:

上边的代码设置了改变透明度的动画过渡效果,但是默认的mode模式in-out模式,这并不是我们想要的。下面我们学一下mode模式。

过渡模式mode:

  • in-out:新元素先进入过渡,完成之后当前元素过渡离开。
  • out-in:当前元素先进行过渡离开,离开完成后新元素过渡进入。

这节课只能算是一个简单的过渡入门,教会大家原理,如果想做出实用酷炫的过渡效果,你需要有较强的动画制作能力,我们下节课继续学习动画的知识。


第9节:mode的设置和404页面的处理

在学习过渡效果的时候,我们学了mode的设置,但是在路由的属性中还有一个mode。这节课我们就学习一下另一个mode模式和404页面的设置。

mode的两个值

  1. histroy:当你使用 history 模式时,URL 就像正常的 url,例如 http://jsapng.com/lms/,也好看!
  2. hash:默认’hash’值,但是hash看起来就像无意义的字符排列,不太好看也不符合我们一般的网址浏览习惯。

具体的效果我在视频中会有所掩饰,不理解的小伙伴可以到视频中进行查看。

404页面的设置:

用户会经常输错页面,当用户输错页面时,我们希望给他一个友好的提示,为此美工都会设计一个漂亮的页面,这个页面就是我们常说的404页面。vue-router也为我们提供了这样的机制.

1.设置我们的路由配置文件(/src/router/index.js):

这里的path:’*’就是找不到页面时的配置,component是我们新建的一个Error.vue的文件。

2.新建404页面:

在/src/components/文件夹下新建一个Error.vue的文件。简单输入一些有关错误页面的内容。

3.我们在用<router-link>瞎写一个标签的路径。

预览一下我们现在的结果,就已经实现404页面的效果。


第10节:路由中的钩子

我们知道一个组件从进入到销毁有很多的钩子函数,同样在路由中也设置了钩子函数。路由的钩子选项可以写在路由配置文件中,也可以写在我们的组件模板中。我们这节课就介绍这两种钩子函数的写法。

路由配置文件中的钩子函数

我们可以直接在路由配置文件(/src/router/index.js)中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。先来看一段具体的代码:

我们在params路由里配置了bdforeEnter得钩子函数,函数我们采用了ES6的箭头函数,需要传递三个参数。我们并在箭头函数中打印了to和from函数。具体打印内容可以在控制台查看object。

三个参数:

  1. to:路由将要跳转的路径信息,信息是包含在对像里边的。
  2. from:路径跳转前的路径信息,也是一个对象的形式。
  3. next:路由的控制参数,常用的有next(true)和next(false)。

写在模板中的钩子函数

在配置文件中的钩子函数,只有一个钩子-beforeEnter,如果我们写在模板中就可以有两个钩子函数可以使用:

  • beforeRouteEnter:在路由进入前的钩子函数。
  • beforeRouteLeave:在路由离开前的钩子函数。

这是我们写在params.vue模板里的路由钩子函数。它可以监控到路由的进入和路由的离开,也可以轻易的读出to和from的值。


第11节:编程式导航

这是这篇文章的最后一节,前10节课的导航都是用<router-link>标签或者直接操作地址栏的形式完成的,那如果在业务逻辑代码中需要跳转页面我们如何操作?这就是我们要说的编程式导航,顾名思义,就是在业务逻辑代码中实现导航。

this.$router.go(-1) 和 this.$router.go(1)

这两个编程式导航的意思是后退和前进,功能跟我们浏览器上的后退和前进按钮一样,这在业务逻辑中经常用到。比如条件不满足时,我们需要后退。
router.go(-1)代表着后退,我们可以让我们的导航进行后退,并且我们的地址栏也是有所变化的。
1.我们先在app.vue文件里加入一个按钮,按钮并绑定一个goback( )方法。

2.在我们的script模块中写入goback()方法,并使用this.$router.go(-1),进行后退操作。

打开浏览器进行预览,这时我们的后退按钮就可以向以前的网页一样后退了。

router.go(1):代表着前进,用法和后退一样,我在这里就不重复码字了(码字辛苦希望大家理解)。

this.$router.push(‘/xxx ‘)

这个编程式导航都作用就是跳转,比如我们判断用户名和密码正确时,需要跳转到用户中心页面或者首页,都用到这个编程的方法来操作路由。

我们设置一个按钮,点击按钮后回到站点首页。

1.先编写一个按钮,在按钮上绑定goHome( )方法。

2.在<script>模块里加入goHome方法,并用this.$router.push(‘/’)导航到首页

 

总结:我们利用11节课把vue-router的知识学习了一遍,因为个人能力有限,知识点难免有所遗漏,希望小伙伴们多多谅解,通过这套课程我对vue-router的知识有了更深的了解,对教是最好的学习也体会更深了。这套课程录制也是比较曲折的,新项目的开始,耽误了一周多的时间,刚进入正常阶段准备继续录制时,家里的键盘又坏掉了,也利用这个机会给家里也还上了机械键盘,可谓因祸得福。

 

未经允许不得转载:技术胖-胜洪宇关注web前端技术 » 技术胖的Vue-router视频教程
分享到: 更多 (0)

评论 95

  1. #63

    感谢,作为javaweb的,跟着走全栈道路。

    匿名3周前 (04-27)回复
  2. #62

    有一些坑没有说到,比如404路由配置要放到最后一条

    匿名1个月前 (04-19)回复
  3. #61

    胖哥,学到alias你最后说是无法调到根路径下有内容的,但是我这边跟着你一步步操作,发现我的是可以的,内容显示的一样,就是地址变了。

    匿名2个月前 (03-26)回复
  4. #60

    求一下真实环境开发的eslint配置方法及配置文件。

    匿名2个月前 (03-16)回复
    • 可以用Airbnb的eslint配置,网上很多

      匿名2个月前 (03-22)回复
  5. #59

    2018/3/13 11:45:30 alias 在实际项目中我们遇到了这样的坑,开始以为是自己的代码写的有问题,找了两个小时作用。后来发现不是代码问题,只是vue不支持这样使用。 这个小坑,我试过了,可以的

    匿名2个月前 (03-13)回复
  6. #58

    在模板中接收 参数 应该是{{$route.params.id}} 而不是{{$router.params.id}} 你多加了一个route r

    匿名2个月前 (03-13)回复
  7. #57

    发现使用this.$router.push后,再使用this.$router.go(1)this.$router.go(1)就失效了

    匿名2个月前 (03-09)回复
  8. #56

    IE9浏览器,route的mode,对于‘history’不生效,应该如何做兼容性处理呢

    匿名2个月前 (03-09)回复
  9. #55

    第四章中子路由中不用再写path:’/’根路径了吧?

    匿名3个月前 (03-01)回复
  10. #54

    fade-enter-active:设置的transition不起作用

    匿名3个月前 (02-24)回复
    • 写下兼容。~

      匿名3个月前 (02-26)回复
  11. #53

    胖哥有没有源代码呀

    匿名3个月前 (02-24)回复
  12. #52

    :newsId(\\d+)这里用两个\是转义的意思吗?

    匿名3个月前 (02-24)回复
  13. #51

    第五节$route.params.newsId的params是不是固定的?

    匿名3个月前 (02-24)回复
    • 亲自试了一下,$route.params.newsId的params是固定的,但是利用url传递参数中的params可以换成其他的,但是这个值需要和,index.js文件中的 path对应的部分一致

      匿名3个月前 (02-28)回复
  14. #50

    您好,通过 标签中的to传参,我用的时候发现,在首页传参,直接加载参数没有显示,必须切换到其他路由,之后再切换回来才有参数。 这个问题您碰见过吗?谢谢!谢谢!!

    匿名3个月前 (02-08)回复
  15. #49

    一个页面放3个和放3个组件,好像实现的效果是一样的,他们有什么区别吗?用哪个会好一点呢?

    匿名4个月前 (01-30)回复
  16. #48

    第九节 histroy写错了 应该是history

    匿名4个月前 (01-26)回复
  17. #47

    第8节 为什么vue-router的transition标签 加上后 页面嵌套的子组件显示不出来

    匿名4个月前 (01-25)回复
  18. #46

    胖哥,第九节中,为什么加上mode:’history’后,404页面就出不来了,不加时,404可以出来

    匿名5个月前 (01-05)回复
  19. #45

    胖哥,《alias别名的使用》那一节 alias放在“/”下现在有用了

    匿名5个月前 (01-04)回复
    • 对的,我刚刚试了一下

      匿名4个月前 (01-17)回复
    • 我的现在也能用了

      匿名4个月前 (01-30)回复
  20. #44

    你们用什么浏览器打开?谢谢。

    匿名5个月前 (01-03)回复
    • 用chrome

      匿名5个月前 (01-05)回复
  21. #43

    报错:第九节的
    mode的两个值
    1.“histroy(这个)”:当你使用 history 模式时,URL 就像正常的 url,例如 http://jsapng.com/lms/,也好看!

    匿名5个月前 (01-02)回复
  22. #42

    很棒!看了一遍有了更全面的了解

    匿名5个月前 (12-29)回复
  23. #41

    Q群拒绝添加新成员呀 胖哥

    匿名5个月前 (12-25)回复
  24. #40

    第三节中文档中的$router.name错了 是$route.name ==、

    匿名5个月前 (12-25)回复
    • 感谢你的指出,会帮助到很多小伙伴的。

      技术胖5个月前 (12-26)回复
    • 感谢小伙伴解惑,很多问题解答都在评论中

      匿名3个月前 (02-07)回复
  25. #39

    第九 拼错了,视频才是正确的
    history 不是 histroy

    匿名5个月前 (12-25)回复
  26. #38

    胖哥:在学习路由一节中,按照视频的指示在index.js中配置了,hi1路由和hi2路由都可以出现。
    由此感想,能不能在一个路由的子路由下面再嵌套两个不同的路由呢!结果并没有显示出来,所以,想提问一下胖哥,这个是可以实现的么?还是我的操作根本就是错误的!
    看胖哥的视频入迷了,胖哥胖哥一定要回复啊!

    匿名5个月前 (12-20)回复
    • hi1页面要有router-view ,并且在hi1的路由下在写个children设置下就行了,

      匿名5个月前 (12-22)回复
    • 我就弄了 然后 那个URL就整的特别乱 无法连续点击 想了好长时间也没改出来

      匿名4个月前 (01-31)回复
  27. #37

    胖哥:别名在path为’/’起作用,我的vue版本是2.9.2的,可能是新版本的原因吧。

    匿名5个月前 (12-15)回复
  28. #36

    哇 胖哥 记得改你的代码 第三节课中的 $.router –> $route 找了30分钟也不报错

    匿名5个月前 (12-11)回复
  29. #35

    胖哥,第二节子路由我按着你的写的,报错了,新手找了一天不知道什么原因,如果在children里面写成{path:’/’,component:hi}, {path:’/hi1′,component:hi1},不会报错但是点击没有反应,如果按着你的写会报1个错,Maximum call stack size exceeded。希望你能帮我解答一下,蟹蟹你

    匿名5个月前 (12-11)回复
  30. #34

    胖哥,点击左边列表标题, 在右边显示内容, 这属于子路由吗,

    匿名6个月前 (12-04)回复
    • 可以这么理解位是子路由的。

      技术胖6个月前 (12-05)回复
  31. #33

    胖哥,我看了第二节子路由之后,敲了代码发现子路由只又一个起作用啊,hi 1和hi 2谁的路由再最下面就谁的起作用,是不是因为版本的原因

    董小宇7个月前 (10-23)回复
  32. #32

    你的三节说有子路由的情况下name不起作用,但是我试过可以的啊

    小冯7个月前 (10-13)回复
  33. #31

    首先感谢胖哥,看这个视频后,确实对新手帮助很大。其次我想说一下我的困惑,我本身是一位java程序员。也是初次接触vuejs。看完胖哥的视频,感觉自己学会了好多东西。但是我们目前的项目是vuejs+springmvc+spring+mybatis。在会了vue的基础上,再在项目里去搭建和开发,感觉差别特别大。对我这种新手来说,有种无从下手的感觉。希望胖哥能讲一下,如何在这种和后端语言结合vuejs的产品搭建,以及与后台进行数据交互,参数传递等做一个视频。

    Jonas.Wang7个月前 (10-12)回复
    • Vue是前后端分离的,你不需要考虑后端的东西,只要通过接口互相调用就可以了。

      技术胖7个月前 (10-22)回复
  34. #30

    感谢胖哥,感觉对我这种刚出来的培训狗帮助很大

    趴着睡8个月前 (10-01)回复
  35. #29

    胖哥, {
    path: ‘/’, //链接路径
    name: ‘hello’,
    component:Hello,
    alias:”/home1″
    }
    我这个别名竟然可以跳到首页

    言Sir8个月前 (09-27)回复
    • 我得也可以 了

      匿名4个月前 (01-15)回复
    • 我的也可以。。。

      匿名3个月前 (02-06)回复
  36. #28

    胖哥,第二节中hi页面为什么有两行
    i am Hi page
    i am Hi page

    言Sir8个月前 (09-26)回复
    • 配置子路由的时候,根路由不要配置模版;
      children:[
      {path:’/’},
      {path:’hi1′,component:Hi1},
      {path:’hi2′,component:Hi2}
      ]

      匿名5个月前 (12-11)回复
    • 因为在children里面又把父组件写了一遍吧

      匿名3个月前 (02-06)回复
  37. #27

    为什么{
    path:’/goParams/:newsId(\\d+)/:newsTitle’,
    redirect:’/params/:newsId(\\d+)/:newsTitle’
    } redirect换成去默认页,或者没有传参的路径就不行

    zhao8个月前 (09-21)回复
  38. #26

    胖哥,想了解不下router-link, router-view和路由文件之间是执行机制,胖哥对这方面研究过吗?
    还有,胖哥有微博号没,可以宣传自己的博客,圈粉会很快的!

    Iven8个月前 (09-21)回复
  39. #25

    第三节:src/reouter/index.js,router多了个e

    Charles8个月前 (09-20)回复
  40. #24


    children:[
    {path:'/',component:Hi},
    {path:'hi1',component:Hi1},
    {path:'hi2',component:Hi2},
    ]

    胖哥, 第二节第四小段,配置子页面导航是不是要把 {path:'/',component:Hi},不变,在children里面直接加2个子页面路由path即可,我这么配置,页面显示空白,还有warning,把当前页面的path拿出来就可以了,我没看视频,不知道是不是文档和视频没对上啊

    鹏飞8个月前 (09-19)回复
    • 你把warning贴出来看看

      Iven8个月前 (09-21)回复
  41. #23

    npm run build打包会生成一个dist文件夹,上传dist文件夹里的文件就好了

    Jharden8个月前 (09-16)回复
  42. #22

    这节也都学完了 感谢胖哥! 不过还是没搞懂,用vue脚手架写完的页面,该怎么上传到自己的空间中,之前都是直接用html css js写完用fxp上传,这里面的文件都是vue什么的,该怎么上传呢?

    刘卓9个月前 (09-06)回复
    • 你可以继续学习Vue的教程,比如我在实战中就详细讲解了如何打包上传到服务器上。

      技术胖9个月前 (09-07)回复
  43. #21

    路由配置文件中的钩子函数的代码中

    后面少写了一个 }

    戴海林9个月前 (09-05)回复
  44. #20

    我问的问题自己解决了 感谢你胖哥 我会一直支持你的 加油胖哥!

    吴建东9个月前 (08-25)回复
  45. #19

    问题在尖括号里
    routes: [
    {
    path: ‘/’,
    name: ‘Hello’,
    component: Hello
    },{
    path:’/hi’,
    component:Hi,
    children:[
    {path:’/’,component:Hi},
    {path:’hi1′,component:Hi1},
    {path:’hi2′,component:Hi2},
    ]
    }
    ]

    吴建东9个月前 (08-25)回复
  46. #18

    别名请不要用在path为’/’中这个坑vue好像已经解决了,我测试中没有出现这个坑

    xiluo02029个月前 (08-21)回复
    • 最近已经解决了,不过讲课时还没有解决。

      技术胖9个月前 (08-21)回复
  47. #17

    整页路由 能简单的说下吗??
    局部路由 解释得非常详细 非常nice

    colorblind9个月前 (08-17)回复
    • 整页路由?Vue都是单页应用,局部刷新,不存在整页路由的。

      技术胖9个月前 (08-18)回复
  48. #16

    胖哥,你在第七节里面是说的gohome1不行,但是我这里采用alias:’/gohome1’是可以得

    蔡正军10个月前 (08-03)回复
  49. #15

    怎么去掉router-link后面的竖线

    jjf10个月前 (07-24)回复
    • 可以请用history模式去掉多余的地址路径。

      技术胖10个月前 (07-25)回复
  50. #14

    router这篇刷完了,有了前面四季的基础,阅读效率很高啊,赞。

    yuyiguo10个月前 (07-17)回复
  51. #13

    你讲到别名(alias)我第一个想到应用的地方就是这里
    {
    path: ‘/’,
    component: Hello,
    alias:’/home’
    }
    我在测试发现现在这个是可以用的
    vue version: 2.8.2

    Guoxin Liu10个月前 (07-13)回复
    • 我也可以,估计新版本可以

      匿名5个月前 (01-04)回复
      • 应该是新版本发现这个问题之后,修改了

        匿名3周前 (04-27)回复
  52. #12

    胖哥,报这个错误 GET http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING 不知道是什么原因

    xiaoliu11个月前 (07-04)回复
    • 本地服务器启动失败,没有启动起来。

      技术胖11个月前 (07-05)回复
      • 但是没有影响正常使用,所以很奇怪

        xiaoliu11个月前 (07-05)回复
  53. #11

    胖哥,很感谢您为我们出了这么好的教程。但是我想实现pc端首页跳转到登录页面我就不知道该怎么做了,首页和其他的页面都有导航,而登录页面没有导航,百度了好多,一直没有找到答案,所以今天特向您求教。

    Dipaka199211个月前 (06-24)回复
    • 请看编程式导航一节,肯定可以解决你的问题。其实就是this.$router.push()或者this.$router.replace().

      技术胖11个月前 (06-25)回复
  54. #10

    看完了这个vue-router感觉受益很多!感谢胖哥!接着看vuex

    wangYH1年前 (2017-05-10)回复
    • 恩,vuex也快录制完成了。现在学习正好。

      技术胖1年前 (2017-05-11)回复
  55. #9

    胖哥 辛苦辛苦!工作之余还要给我们录教学视频,一定会好好学习!

    王耀辉1年前 (2017-05-08)回复
  56. #8

    技术胖讲的不错,浅显易懂

    zhuifeng1年前 (2017-05-08)回复
  57. #7

    期待后续更新!!VueX

    Peach1年前 (2017-05-02)回复
  58. #6

    谢谢技术胖,学到了不少,期待Vuex的教程

    dayang1年前 (2017-04-29)回复
  59. #5

    辛苦了 支持一下。

    error1年前 (2017-04-26)回复
  60. #4

    把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

    {path:’hi1′,name:’hi1′,component:Hi1},

    这里的path应该是”/hi1″,少了斜杠

    wsdever1年前 (2017-04-26)回复
    • 感谢你提出的错误,文章已经修改。

      技术胖1年前 (2017-04-26)回复
  61. #3

    已经刷完了,胖锅锅,快更呀

    小芮1年前 (2017-04-25)回复
  62. #2

    期待期待!后面都没得看了········

    小钟·1年前 (2017-04-24)回复
  63. #1

    期待后续更新!!

    Peach1年前 (2017-04-16)回复