<!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开发】CSplitterWnd的定制使用

    一.基本的CSplitterWnd的使用 1. 在CMainFrame中添加一个CSplitterWnd成员: CSplitterWnd m_splitterwnd1; 2. 基于CView创建两个新 ...

  2. SQL -------- JDBC 查询所有记录

    package demo; import java.io.IOException; import java.sql.Connection; import java.sql.DriverManager; ...

  3. java面试指导2019-9-10

    11. Java 面向对象编程三大特性: 封装 继承 多态 封装 封装把一个对象的属性私有化,同时提供一些可以被外界访问的属性的方法,如果属性不想被外界访问,我们大可不必提供方法给外界访问.但是如果一 ...

  4. NLP 对抗方法整理

    NLP中对抗应用 1. 分词 , 可以用GAN来做,消除不同分词器的差异性 2. 风格迁移, 这个在图像中应用较多,在NLP中同样可行 3. 提高问答系统/阅读理解的性能. 4. 机器翻译应该也可以做 ...

  5. 【Python】【demo实验6】【练习实例】【奖金发放计算（阶梯）】

    题目: 企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%:利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%:20万到40万 ...

  6. 第k大异或值

    这道题与2018年十二省联考中的异或粽子很相像,可以算作一个简易版: 因为这不需要可持久化: 也就是说求任意两个数异或起来的第k大值: 首先把所有数放进trie里. 然后二分答案,枚举每个数,相应地在 ...

  7. LeetCode 203——移除链表（JAVA）

    删除链表中等于给定值 val 的所有节点. 示例: 输入: 1->2->6->3->4->5->6, val = 6 输出: 1->2->3->4 ...

  8. LKM rootkit：Reptile学习

    简介 Reptile是github上一个很火的linux lkm rootkit,最近学习了一些linux rootkit的内容,在这里记录一下. 主要是分析reptile的实现 Reptile的使用 ...

  9. MyBatis学习存档（1）——入门

    一.简介 MyBatis的前身是iBatis,本是Apache的一个开源的项目 MyBatis是一个数据持久层(ORM)框架,把实体类和SQL语句之间建立了映射关系,是一种半自动化的ORM实现 MyB ...

  10. JDBC24homework

    编写程序: 创建一个类DBTools,在DBTools中创建一个方法find,find方法用于对数据库进行查询操作,现在要求将结果集封装成数组线性表嵌套数组的形式: ArrayList<Stri ...