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 ...
随机推荐
- ZOJ 3691 Flower（最大流+二分）
Flower Time Limit: 8 Seconds Memory Limit: 65536 KB Special Judge Gao and his girlfriend's ...
- Tomcat9无法启动
闲来无事,重新学习一下Java, 去Tomcat官网下载Tomcat,各种版本,7-8-9,果断下载最新的9,解压后,无需安装,到bin文件夹下启动, 结果总是一闪而过,百度: 1.查看8080是否占 ...
- （17）会话之Cookie的使用详解
Cooke技术 1,特点 Cookie技术:会话数据保存在浏览器客户端. 2,Cookie技术核心 Cookie类:用于存储会话数据 1)构造Cookie对象 Cookie(java.lang.St ...
- “Invalid configuration file. File "I:/My Virtual Machines/Windows XP english Professional/Windows XP Professional.vmx" was created by a VMware product
“Invalid configuration file. File "I:/My Virtual Machines/Windows XP english Professional/Windo ...
- 专用于ASP.Net Web应用程序的日期控件
原文引入:http://blog.csdn.net/nileel/article/details/1566051 专用于ASP.Net Web应用程序的日期控件 分类: ASP.NET/C#2007 ...
- echo 到 stderr
This question is old, but you could do this, which facilitates reading: >&2 echo "error& ...
- Masonry 比例（multipliedBy）
前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万 ...
- 《The Unreasonable Effectiveness of Recurrent Neural Networks》阅读笔记
李飞飞徒弟Karpathy的著名博文The Unreasonable Effectiveness of Recurrent Neural Networks阐述了RNN(LSTM)的各种magic之处, ...
- Java Socket实战之三：传输对象
转自:https://i.cnblogs.com/EditPosts.aspx?opt=1 前面两篇文章介绍了怎样建立Java Socket通信,这一篇说一下怎样使用Java Socket来传输对象. ...
- pom.xml内容没有错，但一直报错红叉 解决办法
转自:http://www.cnblogs.com/sxdcgaq8080/p/5590254.html [maven] pom.xml内容没有错,但一直报错红叉 解决办法 1.首先看一下下面的这两个 ...