<!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. HDUJ 1203 I NEED A OFFER!

    I NEED A OFFER! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  2. 朴素的标题：MVC中权限管理实践

    基于MVC的web项目最好的权限控制方式我认为是对Action的控制,实现思路记录于此,权限管理分成两个部分授权.认证. 一.授权 1.读取当前项目中的所有需要控制的Action /// <su ...

  3. string string.h cstring 区别

    c++中 string与string.h 的作用和区别 #include  <string.h>  void  main()  {        string  aaa=  "a ...

  4. mysql14---手动备份

    PHP定时完成数据库的备份 1.手动备份数据库(表的)方法 cmd控制台(windows指令): mysqldump –u root –proot 数据库 [表名1 表名2..] > 文件路径 ...

  5. Linux 杀死所有进程

    方法一: sudo killall -9 netease-cloud-music 这种方法,必须要写全称. sudo netease-cloud-music QStandardPaths: XDG_R ...

  6. BZOJ_3620_似乎在梦中见过的样子_KMP

    BZOJ_3620_似乎在梦中见过的样子_KMP Description “Madoka,不要相信 QB!”伴随着 Homura 的失望地喊叫,Madoka 与 QB 签订了契约. 这是 Modoka ...

  7. c#自动登录

    c#自动登录 http://blog.csdn.net/eastmount/article/details/9703757

  8. 真正认识 realloc 的工作方式（转载）

    转自:http://www.cnblogs.com/ren54/archive/2008/11/20/1337545.html realloc 用过很多次了.无非就是将已经存在的一块内存扩大. cha ...

  9. Ruby自定义打印的字符串

    重要性就不说了,没了这个出点小bug都要查半天. def inspect()     return "要输出的字符串写在这里咯" end         实际代码 #------- ...

  10. bzoj 1068: [SCOI2007]压缩【区间dp】

    神区间dp 设f[l][r][0]为在l到r中压缩的第一个字符为M,并且区间内只有这一个M,f[l][r][0]为在l到r中压缩的第一个字符为M,并且区间内有两个及以上的M 然后显然的转移是f[i][ ...