vue 2.0 路由创建的详解过程
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue221.js"></script>
<script src="vue-router231.js"></script>
</head> <body>
<div id="app">
<router-link to="/login">文龙login router-link</router-link>
<router-link to="/register">文龙register点击这里指向to=register组件,模板会渲染 我已经在需要渲染的地方创建一个router-view的占位符</router-link> <router-view></router-view>
</div>
</body>
</html> <script>
var App = Vue.extend({ });
var login = Vue.extend({
template:"<div><h1>徐文龙login收到指令开始渲染</h1></div>"
});
var register = Vue.extend({
template:"<div><h1>非文龙resgister收到点击命令开始渲染 路由router子数组中path指向这个组件,这是组件的template模板</h1></div>"
});
var router = new VueRouter({
routes:[
{path:'/login',component:login},
{path:'/register',component:register}
]
}); new Vue({
el:'#app',
router:router
})
</script> //这个文件是vue.js的路由 var router是创建一个路由, routes本身就是一个数组.
//new vue 是根组件 或者叫做父组件,在根组件上,开劈一个路由,这里路由的path数据的component组件绑定已经创建的组件,当这个已经创建的组件模板数据改变了,会触发
//view部分的的 router-link 所指向的to=组件,这个歌组件中的template数据就会改变.
vue 2.0 路由创建的详解过程的更多相关文章
- vue cli3.0快速搭建项目详解（强烈推荐）
这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cl ...
- vue cli4.0 快速搭建项目详解
搭建项目之前,请确认好你自己已经安装过node, npm, vue cli.没安装的可以参考下面的链接安装. 如何安装node? 安装好node默认已经安装好npm了,所以不用单独安装了. 如何安装v ...
- Vue钩子函数生命周期实例详解
vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
- 自学Zabbix4.2 web监控项创建+item详解
自学Zabbix4.2 web监控项创建+item详解 1. web监控项创建 1.1 Scenario 选项卡 Name: 监控项的名称 Application: 放到哪个应用中 Authenti ...
- Hadoop2.2.0分布式安装配置详解[2/3]
前言 本文主要通过对hadoop2.2.0集群配置的过程加以梳理,所有的步骤都是通过自己实际测试.文档的结构也是根据自己的实际情况而定,同时也会加入自己在实际过程遇到的问题.搭建环境过程不重要,重要点 ...
- VUE SpringCloud 跨域资源共享 CORS 详解
VUE SpringCloud 跨域资源共享 CORS 详解 作者: 张艳涛 日期: 2020年7月28日 本篇文章主要参考:阮一峰的网络日志 » 首页 » 档案 --跨域资源共享 CORS 详解 ...
- Android 6.0 RK3288 ROM编译详解+命令详解【转】
本文转载自:http://blog.csdn.net/MLQ8087/article/details/58607692 Android 6.0 RK3288 ROM编译详解+命令详解 原创 2017年 ...
- laravel 配置路由 api和web定义的路由的区别详解
1.路由经过中间件方面不同 打开kerenl.php就可以看到区别 protected $middlewareGroups = [ 'web' => [ \App\Http\Middleware ...
随机推荐
- Redis管理key命令
1 DEL key该命令用于在 key 存在时删除 key. 2 DUMP key 序列化给定 key ,并返回被序列化的值. 3 EXISTS key 检查给定 key 是否存在. 4 EXPIRE ...
- react-grid-layout
一个好用的拖拽.自适应布局 react 插件 基本使用: // 显示全部 chart 内容区域 import React,{PureComponent} from 'react'; import {R ...
- 一个程序员对微信小程序的看法
我们公司用两周的时间开发了一款微信小程序,叫<如e支付>,大家可以去体验一下.由于接口都是写好的,所以开发起来很快.我将从4个不同的角度来介绍我对微信小程序的理解. 1.技术的角度 ...
- POJ3761 Bubble Sort
对1~n组成的序列进行冒泡排序,一共进行了k趟,问有几个符合题意的序列. 注意:这里指每一趟是指交换当前相邻的全部逆序对,比如:2 1 4 3进行一趟交换就是1 2 3 4 假设我们细心观察.就会发现 ...
- windows下Python扩展问题error: Unable to find vcvarsall.bat
由于对于Windows下Python扩展不熟,今天遇到一个安装问题,特此做个tag.解决方式在stackoverflow上,网址例如以下: http://stackoverflow.com/quest ...
- 2016-2017 ACM-ICPC Southwestern European Regional Programming Contest (SWERC 2016) D.Dinner Bet 概率DP+排列组合
题目链接:点这里 题意: 1~N标号的球 现在A有C个,B有C个 每次可以随机得到D个不同的球(1~N);问你A或B中的C个球都出现一次的 期望次数 题解: dp[i][j][k]表示 随机出现了i个 ...
- POJ - 2516 Minimum Cost（最小费用最大流）
1.K种物品,M个供应商,N个收购商.每种物品从一个供应商运送到一个收购商有一个单位运费.每个收购商都需要K种物品中的若干.求满足所有收购商需求的前提下的最小运费. 2.K种物品拆开来,分别对每种物品 ...
- 主机与虚拟机互ping
1.设置虚拟机网络连接方式(如下图): 2.设置主机和虚拟机的ip为同一个网段,如主机ip:192.168.28.1,虚拟机ip:192.168.28.128 3.如果相互还是ping不通,就检查一下 ...
- Consistent Hashing算法
前几天看了一下Memcached,看到Memcached的分布式算法时,知道了一种Consistent Hashing的哈希算法,上网搜了一下,大致了解了一下这个算法,做下记录. 数据均衡分布技术在分 ...
- word2vec中的数学原理（转）