<!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 路由创建的详解过程的更多相关文章

  1. vue cli3.0快速搭建项目详解（强烈推荐）

    这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cl ...

  2. vue cli4.0 快速搭建项目详解

    搭建项目之前,请确认好你自己已经安装过node, npm, vue cli.没安装的可以参考下面的链接安装. 如何安装node? 安装好node默认已经安装好npm了,所以不用单独安装了. 如何安装v ...

  3. Vue钩子函数生命周期实例详解

    vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...

  4. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  5. 自学Zabbix4.2 web监控项创建+item详解

    自学Zabbix4.2 web监控项创建+item详解 1. web监控项创建 1.1  Scenario 选项卡 Name: 监控项的名称 Application: 放到哪个应用中 Authenti ...

  6. Hadoop2.2.0分布式安装配置详解[2/3]

    前言 本文主要通过对hadoop2.2.0集群配置的过程加以梳理,所有的步骤都是通过自己实际测试.文档的结构也是根据自己的实际情况而定,同时也会加入自己在实际过程遇到的问题.搭建环境过程不重要,重要点 ...

  7. VUE SpringCloud 跨域资源共享 CORS 详解

    VUE  SpringCloud 跨域资源共享 CORS 详解 作者:  张艳涛 日期: 2020年7月28日 本篇文章主要参考:阮一峰的网络日志 » 首页 » 档案 --跨域资源共享 CORS 详解 ...

  8. Android 6.0 RK3288 ROM编译详解+命令详解【转】

    本文转载自:http://blog.csdn.net/MLQ8087/article/details/58607692 Android 6.0 RK3288 ROM编译详解+命令详解 原创 2017年 ...

  9. laravel 配置路由 api和web定义的路由的区别详解

    1.路由经过中间件方面不同 打开kerenl.php就可以看到区别 protected $middlewareGroups = [ 'web' => [ \App\Http\Middleware ...

随机推荐

  1. Navicat for MySQL中文破解版免费下载

    不知道用过MySQL workbench数据库的朋友或站长有没有都遇到过这样的问题? 就是用ssh的连接方式连接数据库的时候,第一次可以连接的上,但是第二次就不行了,以后再用workbench就再也连 ...

  2. php截取某二个特殊字符串间的某段字符串

    在php开发的过程中,有时候会用到截取某二个特殊字符串间的某个字符串,并对这个字符串做特殊的处理,那么对截取出来的字符串做什么特殊处理我们临时无论.我们今天先讲php截取某二个特殊字符串间的某个字符串 ...

  3. [学习笔记]overthewire bandit 通关秘籍

    1.第一关 使用putty等工具连入linux即可,注意port等设置. ls 列目录内文件: cat readme,显示文件内容,即可看到密码. 2.第二关 如何查看文件名为-的文件? cat ./ ...

  4. XML简单介绍及举例

    可扩展标记语言(eXtensibleMarkup Language,简称XML).是一种标记语言.标记指计算机所能理解的信息符号.通过此种标记,计算机之间能够处理包括各种信息的文章等. 怎样定义这些标 ...

  5. IntentFilter打印方法

    转载请注明出处:http://blog.csdn.net/droyon 在我们进行Android应用程序开发时.我们有时须要对某个对象进行打印输出.以方便我们进行调试. 非常多对象实现了toStrin ...

  6. Deep Learning 30: 卷积理解

    一.深度卷积神经网络学习笔记(一): 1. 这篇文章以贾清扬的ppt说明了卷积的实质,更说明了卷积输出图像大小应该为: 假设输入图像尺寸为W,卷积核尺寸为F,步幅(stride)为S(卷积核移动的步幅 ...

  7. webstorm使用帮助（转自http://my.oschina.net/longteng2013/blog/138010），另外有部分内容摘自其它人博客

    为了更高效的开发代码,这里列出了一些webstorm的快捷键和zencoding 发表于1 年 前(2013-06-17 00:19)   阅读(2101) | 评论(2) 11人收藏此文章, 我要收 ...

  8. 并不对劲的bzoj3214:p3333:[ZJOI2013]丽洁体

    题目大意 有三个由若干个单词组成的字符串\(T,A,B,C(|T|,|A|,|B|,|C|\leq 5*10^4,单词长度\leq5,每个单词出现次数\leq500)\) 求从\(T\)中至少删去多少 ...

  9. Linux网络协议栈(三)——网络设备(2)

    2.1.网络设备的注册与注销注册网络设备发生在下列情形: (1)加载网卡驱动程序   网卡驱动程序如果被编译进内核,则它在启动时被初始化,在运行时被作为模块加载.无论初始化是否发生,所以由驱动程序控制 ...

  10. 视音频编解码基本术语及解释&MediaInfo

    MEDIA INFO 下载: https://mediaarea.net/en/MediaInfo/Download/Windows 摘要:          整理了一些基本视音频术语,用于入门和查询 ...