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 ...
随机推荐
- win64 qt与fortran (codeblocks) 混合编程
本教程主要解说用fortran生成dll供qt调用(win64) 本教程须要的软件及文件可从以下的连接下载: http://pan.baidu.com/s/1c04jziC fortran我用的软件是 ...
- Thinkpad升级Window10无法安装expresscache
本人有一台Thinkpad T440s,自从看了这篇帖子12秒开机!ExpressCache SSD缓存加速,就给自己的小黑加持了一块固态硬盘.使用后效果确实很明显. 问题 自从系统自动升级到wind ...
- 我的kindle书单
刚刚入手kindle,希望能够持续阅读,不断进步. 列下书单,记录我的阅读足迹,更希望园友若有好书多多推荐,互相交流. # keep updating ... 我的kindle书单 book name ...
- Cocos2d-x 3.2 Lua演示样例CurrentLanguageTest（当前语言环境）
Cocos2d-x 3.2 Lua演示样例CurrentLanguageTest(当前语言环境) 转载请注明:IT_xiao小巫 本篇博客介绍Cocos2d-x 3.2给我们提供的一个样例.获取当前程 ...
- JAVA学习（七）：方法重载与方法重写、thiskeyword和superkeyword
方法重载与方法重写.thiskeyword和superkeyword 1.方法重载 重载可以使具有同样名称但不同数目和类型參数的类传递给方法. 注: 一是重载方法的參数列表必须与被重载的方法不同,而且 ...
- ios开发--NSDate与NSDateFormatter的相关用法【转】
原文地址:http://blog.sina.com.cn/s/blog_91ff71c0010188u9.html 1.NSDateFormatter配合NSDate与NSString之间的转化 N ...
- 2016/05/05 smarty ①分页 ② 查询后分页 ③缓存
samrty 分页 查询后分页 0505fch.php <?php include("init.inc.php"); include("DBDA.php&qu ...
- Educational Codeforces Round 18 C. Divide by Three DP
C. Divide by Three A positive integer number n is written on a blackboard. It consists of not more ...
- Java类加载机制？
深入研究Java类加载机制 类加载是Java程序运行的第一步,研究类的加载有助于了解JVM执行过程,并指导开发者采取更有效的措施配合程序执行. 研究类加载机制的第二个目的是让程序能动态的控制类加载,比 ...
- UVALive3415 Guardian of Decency —— 最大独立集
题目链接:https://vjudge.net/problem/UVALive-3415 题解: 题意:选出尽可能多的人, 使得他(她)们之间不会擦出火花.即求出最大独立集. 1.因为性别有男女之分, ...