<!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible"  content="ie=edge">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

    <!--  安装 vue-router 路由模块 -->

     <script src="../lib/vue-router-3.0.6.js"></script>

   </head>

   <body>

       <div id="app">

       <!-- <a href="#/login">登录</a>

       <a href="#/register">注册</a> -->

       <!-- router-link 默认渲染为一个a标签， 也可以通过tag设置渲染为其他的标签，例：tag="span"渲染为一个span标签。使用router-link就可以不用手动加“#”，这里推荐使用这种方式-->

       <router-link to="/login" tag="span">登录</router-link>

       <router-link to="/register">注册</router-link>

       <!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view中去 -->

       <!-- 所以：我们可以把router-view 认为是一个占位符 -->

       <router-view></router-view>

       </div>

       <script>

       //组件的模板对象

       var login={

         template:'<h1>登录组件</h1>'

       }

        var register={

         template:'<h1>注册组件</h1>'

       }

      /*Vue.component('login',{

       template: '<h1>登录组件</h1>'

      })*/

       //2.创建一个路由对象，当导入vue-router 包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter

       //在 new 路由对象的时候，可以为 构造函数，传递一个配合对象

       var routerObj=new VueRouter({

         //route //这个配置对象中的route表示 【路由匹配规则】 的意思

         routes:[//路由匹配规则

         //每个路由规则，则都是一个对象，这个规则对象，身上，有两个必须的属性：

         // 属性1 是path, 表示监听 哪个路由链接地址；

         // 属性2 是component,表示，如果 路由是前面匹配到的path，则展示component属性对应的哪个组件

           //注意：component 的属性值，必须是一个组件的模板对象，不能是 组件的引用名称；

           {path:'/login',component:login},

           {path:'/register',component:register}

         ]

       })

           //创建 Vue 实例，得到 ViewModel

           var vm =  new Vue({

               el:'#app',

         data:{

           msg:''

         },

         methods:{},

         router:routerObj  //将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件

           });

       </script>

   </body>

 </html>

第七章 路由 71 路由-router-link的使用的更多相关文章

  1. Web前端框架与移动应用开发第七章

    1.练习1:焦点图切换 html: <!doctype html><html><head> <meta charset="utf-8" / ...

  2. ThinkPHP5.0框架开发--第4章 TP5.0路由

    ThinkPHP5.0框架开发--第4章 TP5.0路由 第4章 TP5.0 路由 ================================================== 上次复习 1. ...

  3. ASP.NET Core的路由[3]：Router的创建者——RouteBuilder

    在<注册URL模式与HttpHandler的映射关系>演示的实例中,我们总是利用一个RouteBuilder对象来为RouterMiddleware中间件创建所需的Router对象,接下来 ...

  4. 前端笔记之React（七）redux-saga&Dva&路由

    一.redux-saga解决异步 redux-thunk 和 redux-saga 使用redux它们是必选的,二选一,它们两个都可以很好的实现一些复杂情况下redux,本质都是为了解决异步actio ...

  5. vue学习指南：第十一篇(详细) - Vue的 路由 第一篇 ( router )

    一.路由的配置 路由  vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面 ...

  6. Vue_(Router路由)-vue-router路由的基本用法

    vue-router官网:传送门 vue-router起步:传送门 vue-router路由:Vue.js官网推出的路由管理器,方便的构建单页应用 单页应用:Single Page Applicati ...

  7. Vue.js 第4章 组件与路由

    组件 什么是组件:组件就是一些标签结构的封装,同时为这些结构添加需要的业务逻辑,设置你想要的样式 一个组件中一般可以设置:结构,功能和样式 为什么要使用组件: 使用方便 复用 组件的创建和使用 组件的 ...

  8. 第七节：Vuejs路由交互及后台系统路由案例

    一. 简介 1.路由的概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源.那么url地址和真实的资源之间就有一种对应的关系 ...

  9. Vue实战狗尾草博客后台管理系统第七章

    Vue实战狗尾草博客后台管理平台第七章 本章内容为借助模块化来阐述Vuex的进阶使用. 在复杂项目的架构中,对于数据的处理是一个非常头疼的问题.处理不当,不仅对维护增加相当的工作负担,也给开发增加巨大 ...

随机推荐

  1. 【VS开发】【Live555-rtsp】在windows 使用vs2008编译live555

    在windows 使用vs2008编译live555 基于 liveMedia的程序,需要通过继承UsageEnvironment抽象类和TaskScheduler抽象类,定义相应的类来处理事件调度, ...

  2. day38 各种队列、Event事件、协程、猴子补丁

    1.各种队列 我们已经学习了队列这种存取值的方法,我们以前使用的队列是可以进行进程间通信的(IPC),但是今天学习的这两种队列是不能进行进程间通信的,只能进行线程间的通信 这两种队列分别是先进后出式队 ...

  3. ssm框架的小总结

    一.mybatis框架 mybatis框架主要就是完成持久层的实现,简化了持久层的开发, 1.首先是配置文件的编写,我们这里就命名为mybatis-config.xml,先配置文件头,然后加载连接数据 ...

  4. 架构设计之CAP定理

    一.什么是 CAP? 「 CAP定理 」又被称为 布鲁尔定理,它提出对于一个分布式系统而言,不能同时满足以下三点: Consisteny(一致性) Availability(可用性) Partitio ...

  5. kafka安装使用配置1.2

    进入cd /usr/local/flume/conf/ vi kafka.conf 配置 agent.sources=s1 agent.channels=c1 agent.sinks=k1 agent ...

  6. centos7搭建NFS服务

    服务器端 139.155.90.78 客户端  192.168.198.146 先查看自己的系统有没有安装rpcbind 和nfs-utils rpm -qa nfs-utils rpcbind 若使 ...

  7. 剑指offer4：重建二叉树（后序遍历）

    1. 题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4 ...

  8. 后缀数组 LCP--模板题

    题意: 给你S串和T串,用T串的所有前缀去匹配S串(匹配值是最长公共子串). 问你总值相加是多少. 思路: 先把两个S,T串倒过来,再拼接 S#T 合成一串,跑一下后缀数组 在排序好的rank里计算每 ...

  9. centos7 源码安装 MongoDb

    1.下载源码包 curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.2.12.tgz 2.解压 放到 /usr/local/ ...

  10. JS实现带省略号的长分页显示

    // 刷新|生成分页信息 function refreshPageInfo(data, pageIndex) { var pageSize = data.pageCount pagingInfo.ht ...