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参数传递 □ ...
随机推荐
- 英特尔神经棒使用入门-NCS2 & NCS1 -OpenVino
|--背景: NCS1使用的NCSDK1和NCSDK2,速度一般,没有想象中的速度,能有TX2一半的速度吧.跟大佬又申请了个NCS2来试一试. 环境配置到跑通自己写的MNIST分类网络花了2天不到吧. ...
- c++第三次实验
第一题: 先把代码贴上来 main.cpp #include <iostream> #include <cstdlib> #include<conio.h> #in ...
- Windows10 正式企业版激活
一.镜像 https://www.landiannews.com/archives/51102.html 二.ISO镜像文件比对SHA1值,判定文件是否被篡改 https://msdn.itellyo ...
- 2018-2019-2 网络对抗技术 20165336 Exp4 恶意代码分析
2018-2019-2 网络对抗技术 20165336 Exp4 恶意代码分析 1.实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp2或E ...
- css阴影框
选中div浮动的阴影框.example-card:hover {box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);transform: translate3d(0, ...
- FPGA验证之SystemVerilog+UVM
[转载]https://blog.csdn.net/lijiuyangzilsc/article/details/50879545 数字芯片和FPGA的验证.主要是其中的功能仿真和时序仿真. ...
- linux怎么查看进程启动,用户的工作目录,pwdx,/proc/11256/cwd
linux 通过pid 寻找程序路径的最简单命令(pwdx) #pwdx pid号1 [pid2] .... 在linux实际操作命令中,查看pid的方式有很多种,通过pid找程序路径的方式也有 ...
- 617A
#include <stdio.h> int main() { int moves[5]={1,2,3,4,5}; int x; scanf("%d", &x) ...
- Spring Cloud微服务架构图
- 惨痛第十届蓝桥杯总结(附录蓝桥省赛知识点总结)-C++ B组
虽然目前距离蓝桥省赛仅仅过去一天但昨天下午和大神对答案的感觉依旧..... 现在深刻里理解到了为啥大神老是说咱们蓝桥叫 阅读理解杯(现在我非常认同这种说法啊...) 虽然第一次参加,赛前紧张提前30分 ...