<!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. 菜鸟系列docker——docker容器(7)

    docker 容器 1. docker 守护进程daemon Daemon是Docker的守护进程,Docker Client通过命令行与Docker Damon通信,完成Docker相关操作,Doc ...

  2. css动画(transition/transform/animation)

    在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

  3. csp模拟赛低级错误及反思

    \(csp\)模拟赛低级错误及反思. 1.没开\(longlong\). 反思:注意数据类型以及数据范围. 2.数组越界(前向星数组未开两倍,一题的数据范围应用到另一题上,要开两倍的写法为开两倍数组) ...

  4. PHP给图片添加文字水印实例

    PHP给图片添加文字水印实例,支持中文文字水印,是否覆盖原图,自定义设置水印背景色.文字颜色.字体等. 水印类water.class.php var $Path = "./"; / ...

  5. python自带queue

    from queue import Queue # 线程安全队列 def thread_queue(): q = Queue(3) # 这个队列最多进多少东西 q.put('a') q.put('b' ...

  6. THUWC2020游记

    Day0 找了旅馆吃了东西才发现明天要去西郊宾馆,换旅馆?? 清华还安排住宿? asas了. 下午出去和kx&face报PKU的名.然后门卫不让进,老吕开启忽悠模式,然后很快就忽悠过去了.(我 ...

  7. 【IntelliJ IDEA】从资源文件读取出来就中文乱码的解决方法

    在application.properties资源文件中设置两个自定义的属性以及属性值: com.sxd.name = "德玛西亚" com.sxd.want = "王者 ...

  8. ueditor 编译出错

    错误 CS0433 类型“Uploader”同时存在于“com.80community.xy, Version=1.0.0.0, Culture=neutral, PublicKeyToken=nul ...

  9. oracle按用户导出导入表

    查看备份目录:select * from dba_directories where directory_name='DATA_PUMP_DIR'; 导入导出的文件名默认都是以备份目录为相对路径. 按 ...

  10. 如何配置数据库镜像<一>

    一.简介 “数据库镜像”是Sql Server 2005推出的一个主要用于提高数据库可用率的软件解决方案.镜像是基于每个数据库执行的,仅适用于使用完整恢复模式的数据库.简单恢复模式和大容量日志恢复模式 ...