Vue.js 路由

本章节我们将为大家介绍 Vue.js 路由。

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。

Vue.js 路由需要载入vue-router 库

中文文档地址:vue-router文档


安装

1、直接下载 / CDN

NPM

推荐使用淘宝镜像:


简单实例

Vue.js + vue-router 可以很简单的实现单页应用。

以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示:

NPM 路由实例

接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码:

你也可以在 Github 上下载:https://github.com/chrisvfritz/vue-2.0-simple-routing-example

下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令:

如果你需要发布到正式环境可以执行以下命令:

执行成功后,访问 http://localhost:8080 即可看到如下界面:


内容来自:runoob.com 菜鸟教程

整理:极动云,宁波家电物联网云平台

CONTACT US: http://www.iot-jd.com

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router。在没有使用路由之前,我们页面的跳转...
    一岑不冉阅读 11,070评论 8 58
  • 雨落青霖争生枝 春微透,翠双垂 点点楼台,倒影见烟潭 几度款语许深期 叹离忧,何时休? 倚闲凝伫忽闻音 弄绮衣,掩...
    Chris_caiyh阅读 3,085评论 0 1
  • 坚持日更第二天,加油✊ 人生之路没有绝经,只有practise,practise,practise. 最...
    我是彩虹小姐阅读 2,415评论 1 7
  • 已不再是那个需要父母庇佑的少年,已然亭亭玉立。曾经,因为父母,他人来对待我们,而现在,因为我们,他们又对父母另眼相...
    布兜鱼儿阅读 2,372评论 2 0

友情链接更多精彩内容