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参数传递 □ ...
随机推荐
- JavaScript基础知识（Date 的方法）
Date 的方法 console.log(typeof Date);// "function" Date的实例 console.log(typeof new Date()); // ...
- C语言：二进制模5
输入一串字符,若是二进制则求其模五的值. 要求:1.若输入的字符包含除0.1以外的值,则输出:invalid 2.若输入的为二进制字符串,则输出所计算的其模五的值 3.若其输入字符均为0.1,但是第一 ...
- Ubuntu上hi3531交叉编译环境arm-hisiv100nptl-linux搭建过程
安装SDK 1.Hi3531 SDK包位置 在"Hi3531_V100R001***/01.software/board"目录下,您可以看到一个 Hi3531_SDK_Vx.x.x ...
- esp32驱动SSD1306的oled显示汉字(micropython)
1.完整源码: 主函数oled.py from ssd1306 import SSD1306_SPI from ssd1306 import SSD1306 import font import ma ...
- msmq访问格式
//集群测试,以下格式不行(应是Host映射之类没配置OK) //_MSMQPath = @"FormatName:DIRECT=TCP:msmq496-ha\private$\496-10 ...
- Java面试题和解答(四)
1.JVM什么情况下会GC,GC策略有哪些 当应用程序分配新的对象,GC的代的预算大小已经达到阈值,比如GC的第0代已满:代码主动显式调用System.GC.Collect():其他特殊情况,比如,系 ...
- 实现hibernate 的validator校验
Validator校验分为快速校验和全校验.快速校验是当遇到第一个参数不符合条件时,立即停止校验程序,将校验不通过的信息返回到前端:全校验是将前端传过来的参数全部进行校验,将所有不通过校验的信息一起返 ...
- .NET Core 事件总线,分布式事务解决方案：CAP 基于Kafka
背景 相信前面几篇关于微服务的文章也介绍了那么多了,在构建微服务的过程中确实需要这么一个东西,即便不是在构建微服务,那么在构建分布式应用的过程中也会遇到分布式事务的问题,那么 CAP 就是在这样的背景 ...
- Quill插入html5的video标签
quill的video模块插入的是iframe标签,我们需要的是video标签. 1.定义自己的video模块 declare const require: any; const Quill = re ...
- .net如何引用该命名空间
一.在.Net中如何引用该命名空间 (1)System.Windows.Threading 该命名空间在程序集WindowsBase(WindowsBase.dll)下 (2)System.Windo ...