Vue.js学习系列(四十七)-- 路由

Vue.js路由允许我们通过不同的URL访问不同的内容。通过Vue.js可以实现多视图的单页Web应用(single page web application,SPA)。

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

可以在vue.js官网下载。这里我们使用的是vue-router.min.js

也可以使用淘宝镜像

cnpm install vue-router

下面我们先来举一个使用vue.js+router实现单页面应用的简单例子。

实现步骤:

1.使用模块化机制编程,导入Vue和VueRouter,要调用Vue.use(VueRouter)

2.定义路由组件

3.定义路由

4.创建router 实例,然后传 `routes` 配置

5.创建和挂载根实例

要通过router配置参数注入路由,从而让整个应用都有路由功能

运行结果:

点击Go to first路径,页面显示出first

点击Go to second路径,页面显示出second

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

推荐阅读更多精彩内容

  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,333评论 8 124
  • 就是不顺利,出门摔一跤,然后每一件事情都开始出问题,就如星座运势说的,过了那个凡事利好的阶段了。算了,放到一边就去...
    茄子就是茄子阅读 1,027评论 0 0
  • 猪八戒网:http://search.zhubajie.com/p/?kw=ios开发 紫平方:http://ww...
    巴糖阅读 2,187评论 0 3
  • 今天是感恩节,谈谈一个你最想感恩的人,他是谁,他带给你什么?你曾经获得了很多恩宠,你会如何把他给你的东西传递出去?...
    926426生阅读 3,161评论 0 1
  • 静静手绘阅读 1,859评论 0 0

友情链接更多精彩内容