<!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. 从程序员角度看ELF | Linux－Programming （转）

    ★概要: 这片文档从程序员的角度讨论了linux的ELF二进制格式.介绍了一些ELF执行 文件在运行控制的技术.展示了如何使用动态连接器和如何动态装载ELF. 我们也演示了如何在LINUX使用GNU ...

  2. 【iOS系列】-使用CAGradientLayer设置渐变色

    有时候iOS开发中需要使用到渐变色,来给图片或者view盖上一层,使其显示效果更好,我们这里使用的CAGradientLayer来设置渐变色 要实现的效果如下: Demo地址---下载 // 创建渐变 ...

  3. 2016/05/23 thinkphp M方法和D方法的区别

    M方法和D方法的区别 ThinkPHP 中M方法和D方法都用于实例化一个模型类,M方法 用于高效实例化一个基础模型类,而 D方法 用于实例化一个用户定义模型类. 使用M方法 如果是如下情况,请考虑使用 ...

  4. YTU 2905: The Sum of 1...N

    2905: The Sum of 1...N 时间限制: 1 Sec  内存限制: 128 MB 提交: 281  解决: 51 题目描述 Given an integer n,your task i ...

  5. 配置JDK环境变量配置及path和classpath的作用

    1.环境变量配置 用鼠标右击“我的电脑”->属性->高级->环境变量 JAVA_HOME :D:\Program Files\Java\jdk1.6.0_12(JDK安装路径) Pa ...

  6. idea把项目提交到svn服务器步骤

    1.设置忽略文件.文件夹 2.找到以下选项 3.选择要上传项目的svn服务器地方和svn管理目录 4.填完相关提交信息,点击share就ok啦

  7. 博弈论中的SG函数

    SG函数的定义: g(x) = mex ( sg(y) |y是x的后继结点 ) 其中mex(x)(x是一个自然是集合)函数是x关于自然数集合的补集中的最小值,比如x={0,1,2,4,6} 则mex( ...

  8. hdu5475(线段树单点修改，统计区间乘积)

    题目意思: 给定a*b*c*d*e*f*....,可以在某一步去掉前面的一个因子,每次回答乘积. #include <cstdio> #include <cstring> #i ...

  9. hdu3652(含有13且能被13整除的数)数位DP基础

    B-number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  10. 关于XAMPP Apache无法启动问题解决方案

    安装好XAMPP后,启动Apache服务启动失败,然后从xampp安装目录下执行apache_start.bat文件,如下图 显示443端口被占用. 解决方法: 启动cmd,输入netstat -a  ...