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参数传递 □ ...
随机推荐
- JDBC的理解
import java.sql.*;//倒入java.sql包 public class JDBC { //封装没有返回值的jdbc函数(Update) --适用于增 删 改 public stati ...
- Maven的安装、配置及使用入门+maven安装报错：JAVA_HOME【申明：来源于网络】
Maven的安装.配置及使用入门+maven安装报错:JAVA_HOME[申明:来源于网络] Maven的安装.配置及使用入门:http://www.cnblogs.com/dcba1112/arch ...
- python opencv 读取USB摄像头的像素问题
问题描述 每次调用capture读取video的时候,还回的像素都是640x480,不管是笔记本的摄像头还是USB摄像头,明明我的摄像头是支持130万读取的功能的呀. 问题分析 一番查找,关于用ope ...
- RoR - Action Pack
什么是Action Pack: Rest and Rails: Rest if all about resources rake routes: print out all routes
- PySe-007-解决“Chrome正在受到自动软件的控制”
python使用selenium启动chrome的代码如下所示: #!/usr/local/bin/python # -*- coding: utf-8 -*- from selenium impor ...
- Cross-Origin跨域问题
为什么会跨域,要先了解浏览器的同源策略SOP(Same Orign Policy) https://segmentfault.com/a/1190000015597029 同源: 如果两个页面的协议 ...
- C#中string.Format 用法详解
这篇文章主要介绍了C#中string.format用法,以实例形式较为详细的讲述了string.format格式化的各种用法,非常具有实用价值,需要的朋友可以参考下 本文实例总结了C#中string. ...
- Delphi窗体显示Echarts图表
笨办法,先保存用着 unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Varian ...
- 浅析MySQL InnoDB的隔离级别
MySQL InnoDB存储引擎中事务的隔离级别有哪些?对应隔离级别的实现机制是什么? 本文就将对上面这两个问题进行解答,分析事务的隔离级别以及相关锁机制. 隔离性简介 隔离性主要是指数据库系统提供一 ...
- hadoop集群的规划和搭建
1.操作系统版本:CentOS 6 CM版本:CM5.x CDH版本:CDH5.x 2.安装操作系统,对系统盘做 RAID1: 配置静态IP.hostname信息:vim /etc/sysconfig ...