<!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. 论持久战之PHPStorm Xdebug Remote 调试环境搭建（不依赖本地环境）

    最近公司自己搭建了一个资源管理平台,哈哈,当然是我在github上找的,后台用PHP开发.个人觉得写得非常nice,web页面几乎模拟了真实OS,有兴趣的朋友下载部署体验https://github. ...

  2. grep命令最经常使用的功能总结

    1. grep最简单的用法,匹配一个词:grep word filename 2. 能够从多个文件里匹配:grep word filename1 filenam2 filename3 3. 能够使用正 ...

  3. oracle多表关联多字段update

    多表关联多字段update 有代码有J8: update spatial_references set( auth_name, auth_srid, falsex, falsey, xyunits, ...

  4. while语句字符串的基本操作

    1,编码:对现在通用文字编码成计算机文字,便于储存,传递,交流. 最早的计算机编码是ACSII美国人创建的,包含英文字母,数字,以及特殊符号.总共是128个码位:2**7,因为计算机的底层只能识别:& ...

  5. SpringMVC_配置和注解--跟海涛学SpringMVC(和自己在项目中的实际使用的对比)

    Spring2.5 之前,我们都是通过实现Controller 接口或其实现来定义我们的处理器类,就像前面介绍的 这里介绍的是Spring3.1的新特性,虽然现在我用的是spring4.2.6,不过基 ...

  6. SoapUI中Code多行显示设置

    你们的SoapUI 有设置下面的选项吗? Before adding your project, we recommend that you enable the following ReadyAPI ...

  7. apply current folder view to all folders

    https://www.tenforums.com/tutorials/35093-apply-folder-view-all-folders-same-type-windows-10-a.html ...

  8. UICollectionView基础/UICollectionViewCell的四种创建方式

    前言 UICollectionViewCell的四种创建方式:http://blog.csdn.net/ZC_Huang/article/details/52002302 这个控件,看起来与UITab ...

  9. 并不对劲的AC自动机

    这像是能解决所有问题的样子(并不).AC自动机之所以叫AC自动机是因为它能解决所有AC自动机的题. 其实只能解决的是很多模式串匹配一个母串的问题. 把kmp中的next数组得到下一次跳转的位置看成特殊 ...

  10. 【HDU 1520】 Anniversary Party

    [题目链接] 点击打开链接 [算法] 树形DP 令f[i][0]表示 : 以i为根的子树中,若i不参加宴会,所能获得的最大愉悦值 f[i][1]表示 : 以i为根的子树中,若i参加宴会,所能获得的最大 ...