Vue-Router路由Vue-CLI脚手架和模块化开发 之 vue-router路由
vue-router路由：Vue.js官网推出的路由管理器，方便的构建单页应用；
单页应用（SPA）只有一个web页面的应用，用户与应用交互时，动态更新该页面的内容；简单来说，根据不同的url与数据，将他们都显示在同一个页面中，就可称为单页应用；而控制页面跳转需要用路由。
vue-router下载：下载js,或使用npm install vue-router-S;
vue-router使用：
1、定义组件；
2、配置路由；
3、创建路由对象；
4、注入路由
vue-router官网：https://router.vuejs.org/zh/
实例：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue-router</title>
</head>
<body>
<div id="one">
<router-link to="/home">首页</router-link>
<router-link to="/foods">美食</router-link> <div>
<!--将数据显示在这里-->
<router-view></router-view>
</div>
</div>
</body> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript" src="../js/vue-router.js" ></script>
<script> //1 定义组件
let Home = {
template : "<h2>首页</h2>"
}
let Foods = {
template : "<h2>美食</h2>"
} //2 配置路由 路由可能有多个
const myRoutes = [
{
path : "/home",
component : Home
},
{
path : "/foods",
component : Foods
}
] // 3 创建路由对象
const myRouter = new VueRouter({
//routes : routes
routes : myRoutes
}); new Vue({
//router : router
router : myRouter //4 注入路由 简写
}).$mount("#one");
</script>
</html>
Vue-Router路由Vue-CLI脚手架和模块化开发 之 vue-router路由的更多相关文章
- Vue-Router路由 Vue-CLI脚手架和模块化开发 之 路由常用配置与路由嵌套
vue-router路由常用配置 1.mode:配置路由模式,默认为hash,由于URL很丑,可以修改为history,但是需要服务端的支持: 以上一篇的博文为实例: 初始时url的显示: 使用mod ...
- Vue-Router路由Vue-CLI脚手架和模块化开发 之 使用props替代路由对象的方式获取参数
在上一章博文中使用路由对象$route获取参数时,组件和路由对象耦合,在这篇博文中就可以使用props来进行解耦: 1.在组件中使用props选项定义数据,接收参数: 2.在路由中,使用props选项 ...
- Vue-Router路由 Vue-CLI脚手架和模块化开发 之 使用路由对象获取参数
使用路由对象$route获取参数: 1.params: 参数获取:使用$route.params获取参数: 参数传递: URL传参:例 <route-linke to : "/food ...
- Vue-Router路由Vue-CLI脚手架和模块化开发 之 路由的动态跳转
在上一篇的博文中,实现的跳转是在页面中进行实现的 利用vue-router实例方法,使用js对路由进行动态跳转: 1.router.push:参数为路由对象,跳转到指定路由,跳转后会产生历史记录: & ...
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)
脚手架Vue-CLI(路由Router) 一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装. 二 使用(上面按装下面步骤自动会生成) 第一步:导入路由对 ...
- VUE系列一：VUE入门：搭建脚手架CLI（新建自己的一个VUE项目）
一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...
- vue搭建cli脚手架环境（出现问题及解决，主要是node版本低）
Vue 提供了一个官方的cli,为单页面应用 (SPA) 快速搭建繁杂的脚手架. 一.vue cli脚手架 脚手架通过webpack搭建开发环境 使用ES6语法 打包压缩js为一个文件 项目文件在环境 ...
- Vue总结第五天：vue-router （使用模块化（创建Vue组件）机制编程）、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套（子路由）、路由传递数据、导航守卫）
Vue总结第五天:vue-router ✿ 路由(器)目录: □ vue中路由作用 □ vue-router基本使用 □ vue-router嵌套路由 □ vue-router参数传递 □ ...
随机推荐
- oo第二单元作业总结
oo第二单元博客总结 在第一单元求导结束后,迎来了第二单元的多线程电梯的问题,在本单元前两次作业中个人主要应用两个线程,采用“生产者-消费者”模式和共享数据变量的方式解决问题.在第三次作业中加入多个电 ...
- ide phpStorm注释模板修改
1.打开设置 2.找到,如下图所示位置,注意是第二个tab(Includes) 3.再任意空白位置,输入/**,按回车即可出现对应注释内容(其实还可以先 Ctrl + Shift + /,然后删少一个 ...
- IDEA导入Git项目后右键项目找不到Git选项的解决方法
进入Setting -> version Control -> 在下图的第二步中是否有灰色的Module,选中它->点击第三步的+即可 转自:https://blog.csdn.ne ...
- sudoers权限管理
该/etc/sudoers文件的权限管理很完善,覆盖了linux中的各种命令,各种shell.编辑器等等,在此留作以后作为参考. # This file MUST be edited with the ...
- 选择排序（JAVA实现）
算法思想:每一趟从待排序的记录中选出最小的元素,顺序放在已排好序的序列最后,直到全部记录排序完毕.也就是:每一趟在n-i+1(i=1,2,…n-1)个记录中选取关键字最小的记录作为有序序列中第i个记录 ...
- （2.1）mysql升级与降级
(2.1)mysql升级与降级 转自:深入浅出mysql数据库开发.优化与管理第二版 1.mysql升级 2.mysql降级
- 2018-2019-2 网络对抗技术 20165236 Exp6 信息搜集与漏洞扫描
2018-2019-2 网络对抗技术 20165236 Exp6 信息搜集与漏洞扫描 一.实验内容 1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应用 ...
- 2019年IntelliJ IDEA 最新注册码，亲测可用（截止到2020年3月11日）
2019年IntelliJ IDEA 最新注册码(截止到2020年3月11日) 操作步骤: 第一步: 修改 hosts 文件 ~~~ 在hosts文件中,添加以下映射关系: 0.0.0.0 acco ...
- GAITC 2019全球人工智能技术大会（南京）
2019年5月25日至26日,由中国人工智能学会主办,以“交叉.融合.相生.共赢”为主题的2019GAITC将在南京全新亮相. 2019 全球人工智能技术大会(2019 GAITC)以“前端引领.深度 ...
- matlab——之class类（详细总结）
https://blog.csdn.net/qinze5857/article/details/80545885 开篇:搜了一下网上介绍matlab的class类,信息不全,且总结不全面,于是单独he ...