<!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. airflow的web任务管理

    ariflow里绿的代表都跑完了:红的表示有问题:点红的图标进去: 点tree view 红色表示那一天失败: 点进去看可以看log: 点clear则是重跑任务:

  2. Intellj Idea 快捷键入门

    Intellj IDEA快捷键入门 时间: 2019/11/29 系统: Win10系统 版本 :Intellj Idea 2018.3 背景: 入手Intellj idea 两个月了,总结一下一些常 ...

  3. PAT B1042 挖掘机哪家强

    AC代码 #include <cstdio> #include <algorithm> using namespace std; const int max_n = 11000 ...

  4. matplotlib库绘制散点图

    假设通过爬虫你获取到了北京2016年3,10月份每天白天的最高气温(分别位于列表a,b),那么此时如何寻找出气温随时间(天)变化的某种规律? a = [11,17,16,11,12,11,12,6,6 ...

  5. windows环境下使用C++&Socket实现文件传输

    server #include <stdio.h> #include <iostream> #include <cstring> #include <fstr ...

  6. 前端BOOM和DOOM

    BOOM :是指浏览器对象模型,它使JavaScript 有能力与浏览器进行 对话DOM:  是指文档对象模型,通过它可以访问HTML文档的所有元素 Windows对象 所有的浏览器都支持Window ...

  7. 安装 pybloomfilter

    1.在windows的cmd下,使用 pip install pybloomfiltermmap 命令安装,pybloomfiltermmap 时报错 ,错误信息如下 根据错误信息分析,报错原因是需要 ...

  8. Java 注解（原理及其使用）

    一.注解(annotation)介绍 Java在JDK5中引入源代码的注解机制. 1.什么是注解? 注解为代码添加了元数据,元数据是关于数据的组织.数据域及其关系的说明信息. 更通俗的说,注解为程序元 ...

  9. hdu 1576

    老生常谈的问题 利用同余的思想 抽象出表达式  bx+9973y=n 然后用bx+9973y=1(题目给出了gcd(b,9973)=1) 求出基础解 y0 bx+9973y=n 的 基础解y=n*y0 ...

  10. Eclipse错误提示: Symbol 'xxxx' could not be resolved

    在eclipse中安装maven(网上资源):https://zhinan.sogou.com/guide/detail/?id=1610049267 项目名 右键->configure-> ...