Vue.js学习系列(四十七)-- 路由
来源:互联网 发布:如何做淘宝推广赚钱 编辑:程序博客网 时间:2024/05/23 07:24
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
0 0
- Vue.js学习系列(四十七)-- 路由
- Vue.js学习系列(四十)-- 修饰符(一)
- Vue.js学习系列(四十三)-- 使用props传递数据
- Vue.js学习系列(七)---监听事件
- Vue.js学习系列(八)---使用路由搭建单页应用(一)
- Vue.js学习系列(九)---使用路由搭建单页应用(二)
- vue.js学习笔记(七)--插件
- 前端框架vue.js系列(13):路由
- Vue.js学习系列(三十五)-- Vue.js事件监听
- Vue.js学习系列(三十七)-- Vue.js表单
- Vue.js学习系列(四十二)-- Vue.js组件
- vue学习系列-认识vue.js
- three.js 源码注释(四十七)Material /LineDashedMaterial.js
- 日拱一卒(四十七)
- Vue.js路由
- Vue.js两级路由
- Vue学习之源码分析--聊聊Vue.js的template编译(七)
- Vue.js学习系列(三十)-- Vue.js样式绑定(一)
- 全面解读HTTP Cookie
- 喵呜,又要配置环境
- oracle索引 总结
- ITK resample图像重采样
- BOS WebService 接口开发
- Vue.js学习系列(四十七)-- 路由
- LiteOS学习第三篇——los_config.h 配置文件的理解
- JAVA-抽象类、接口、继承
- 如何实现企业敏捷
- c读取文件保存到mysql
- adaboost训练——强分类器训练原理
- 第三方登录QQ、分享
- 你真的会用Gson吗?Gson使用指南(二)
- oracle定时任务中的时间设置