打赏作者

Vuejs 2.0 使用 vue-router 处理前端路由

Vue js 2.0 教程 >> Vuejs 2.0 使用 vue-router 处理前端路由视频发布于 2016-11-16

在标准的 SPA （单页应用）中，前端的路由都是交给前端框架来处理的，在 Vuejs 中，官方推荐使用的就是 vue-router，我们这节视频来学习使用 vue-router ，构建基础的单页应用。

登录并参与讨论

8年前

使用laravel api+ Vuejs是最佳实践么？

JellyBool 回复 leec

8年前

这个会在另外的一个系列说吧，这个系列暂时先说明基础的

8年前

厉害了！得再看一遍！信息量有点大。。。

8年前

越来讲的越好了，能不能讲下，laravel 读取100条记录，vue 分页无刷新显示呀？

JellyBool 回复 compaqnx9000

8年前

vue 分页无刷新显示? 这些后面可能会讲，其实分页看你怎么取舍，可以前端分页，也可以后端分页。前端分页的话，大概就可以使用 https://github.com/TahaSh/vue-paginate

a119347 回复 compaqnx9000

8年前

vue分页显示数据的话有个vuetable蛮好用的

JellyBool 回复 a119347

8年前

恩，是的。这个确实挺好的

8年前

页面上显示错误的那个是啥插件还是软件？

JellyBool 回复 if1024

8年前

没记错的话，是 chrome dev-tool 吧。mac 按 command option i 就可以呼出这个控制面板

yzqiang 回复 JellyBool

8年前

9分40秒那个在Chrome上全屏黑色透明背景的错误提示是如何显示出来的？是用了Chome插件，还是Vue.js生成的呢？

JellyBool 回复 yzqiang

8年前

we b pa c k 打包的报错信息吧

8年前

大神，推荐一个VPN。之前那个太慢了

JellyBool 回复 wl876645

8年前

我现在还是用 green，或者你试试这个：https://agentwho.network/?rc=9mz8mng50u

这里面有我的推荐码

wl876645 回复 JellyBool

8年前

谢谢大神~~~~

8年前

laravel de restful 形式的接口可以应用到这里么
能简单的给说说么

8年前

非常支持每次结束前总结一下整个流程这样理解起来很好也有时间去理解下文档资料

8年前

老师你好～照著您的方式是了路由,
点选连结后…路径有更改
但页面点击后并无刷新或跳业？

JellyBool 回复 ye0205414225

8年前

这个 SPA 理论上来说是不刷新的，而是使用另外的vue组件填充 router-view 的内容。所以没出现正确的数据，基本上是组件和路由没定义好吧。

ye0205414225 回复 JellyBool

8年前

搞定了! 感激不尽.
想请教老师
如果想把整个脚手架制作完成的模版放上网域环境上,有网址那种
该如何操作呢？

JellyBool 回复 ye0205414225

8年前

看你后端选用什么语言来处理，如果你是 nodejs ，当然会有相对应的解决方法，如果你选择 php 的话，常见的 lnmp 架构就可以实现了。其实这些组件和 vuejs 脚手架出来的东西，都是静态文件，你打包，或者 build 之后，当做普通的 js 文件来看就可以了。比如说在 laravel 的项目中，你把这些脚手架的项目文件放 pulic 目录基本上就 OK 了

ye0205414225 回复 JellyBool

8年前

解决了～感谢老师！
还有个疑问是开发时的路由指向会通过 /#/ ,这个部分如果到了其他网域环境后也存在,可有方法去除 /#/呢？
谢谢老师！

JellyBool 回复 ye0205414225

8年前

貌似我见到的去掉这个 /#/ 的解决方案都是通过后端路由去正则匹配。

ye0205414225 回复 JellyBool

8年前

解决了！
在const route设定
mode: ‘history’,
history: true
就可以剔除锚点

8年前

如果使用laravel+vue的前后端分离模式，那微信授权登陆该如何实现呢，原来那种模板渲染的我知道，但是现在前后端分离不知道怎么弄了。。

jihaichuan 回复 GOD_Nt

7年前

我也想求解这个事情

JellyBool 回复 jihaichuan

7年前

这个视频貌似有点坑，我只是在某个地方看到过。并没有实际的解决方案和对应的经验

jihaichuan 回复 JellyBool

7年前

恩恩，还有一个事情， PHPStorm里面，我看些的代码没有一个自动缩进，这个有插件吗？我安装Vue.js 插件了，感觉好像没有太大用处，我喜欢4个空格的

JellyBool 回复 jihaichuan

7年前

这个好像是要你自己设置一下 tab indent。。。

command shift a ，搜 tab and indents ，设置一下

jihaichuan 回复 JellyBool

7年前

设置了一下，好像不管用，不知道是不是改升级到工具的原因，这个工具是我9 点版本的把

8年前

大神请问如何去掉路由中的#号？

akeen 回复 hcweb

8年前

参见 router文档 https://router.vuejs.org/zh-cn/essentials/history-mode.html

hcweb 回复 akeen

8年前

感谢！找了好久了！

7年前

Failed to resolve async component render: TypeError: Cannot read property ‘_c’ of undefined
我这么报错了

JellyBool 回复 lovefisher

7年前

这种基本上重装一次 npm 依赖就好了

7年前

上一个问题已经解决了。。
有个疑问，
关于命名路由的name是什么意思呢？

JellyBool 回复 lovefisher

7年前

就是取个名字而已，便于后面使用的。

lovefisher 回复 JellyBool

7年前

那么普通的动态路由不能绑定todo.id了么？

7年前

vue-router.esm.js?880d:16 [vue-router] Failed to resolve async component render: TypeError: Cannot read property ‘_c’ of undefined
我重装了nodejs还是报这样的错误@JellyBool

JellyBool 回复 asion

7年前

这样看来有可能是某个地方拼错了，，，

7年前

已解决，这个评论能不能设置删除，已解决的问题，不想在推送给你

JellyBool 回复 xiaoshen

7年前

以后遇到这种情况，把问题留着，然后把解决办法写上会更好一点。

而不是像这样写 已解决

xiaoshen 回复 JellyBool

7年前

主要是个人问题，粗心拼写错误漏了／或者其他符号，没有讨论价值，所以想自己删除

7年前

已解决已解决已解决

7年前

.vue单文件组件export default{ name:xxxx}，这里的name名字感觉没什么用处啊，还是说以后哪里会用到吗

JellyBool 回复 cuicc1

7年前

本来是有打算用的，后来录视频发现不用也行，就

7年前

终于对着这段视频把代码撸出来了

7年前

总结一下：在main.js里面定义的routes，是为了根据不同的uri填充不同的组件而存在的。