<!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>

       <!-- 这是 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>

第七章 路由 70 路由-vue-router的基本使用的更多相关文章

  1. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  2. vue路由登录拦截(vue router登录权限控制)

    实现原理: 哪些路由需要验证需要在路由文件router/index.js中指定: { path: '/', component: Home, name: 'Home', iconCls: 'fa fa ...

  3. 「vue基础」一篇浅显易懂的 Vue 路由使用指南（ Vue Router 上）

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

  4. 06 Vue路由简介,原理,实现及嵌套路由,动态路由

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

  5. Vue躬行记（8）——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  6. [Vue 牛刀小试]：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  7. [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  8. Vue Router 路由守卫：完整的导航解析流程

    完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...

  9. Vue.js 2.x笔记：路由Vue Router（6）

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

随机推荐

  1. Python smtplib发邮件

    常用邮箱SMTP.POP3域名及其端口号 发送普通文本内容的邮件 import smtplib from email.header import Header from email.mime.text ...

  2. 向指定用户发送WebSocket消息并处理对方不在线的情况

    使用SimpMessagingTemplate发送消息 使用org.springframework.messaging.simp.SimpMessagingTemplate类可以在服务端的任意地方给客 ...

  3. 2019牛客暑期多校训练营（第九场）-D Knapsack Cryptosystem （折半搜索）

    题目链接:https://ac.nowcoder.com/acm/contest/889/D 题意:题意简单,从大小为36的集合中选若干元素使得他们的和为sum. 思路:第一感觉用搜索,复杂度为2^3 ...

  4. *【Python】【demo实验27】【练习实例】【定义递归函数】

    原题: 原题解答: #!/usr/bin/python # encoding=utf-8 # -*- coding: UTF-8 -*- # 利用递归函数调用方式,将所输入的5个字符,以相反顺序打印出 ...

  5. SQLServer学习之表的操作

    SQLServer学习之表的操作 关系数据库通常包含多个表.数据库实际上是表的集合,数据库的数据或者信息都是存储在表中的.表是对数据进行存储和操作的一种逻辑结构,每一个表都代表一个对用户意义的对象. ...

  6. redis哨兵sentinel.conf文件

    关闭保护模式 //17行 protected-mode no 端口号 //21 port 26379 后台启动 //26 daemonize yes //84行 主机的ip加端口号 2 为票数 sen ...

  7. ES简介及特点

    1.ES是什么? ES是一个高度可伸缩的开源的全文检索和分析引擎,它允许你以近实时的方式快速存储.搜索.分析大量数据,ES是基于Lucence开发,隐藏其复杂性,提供了简单易用的restful api ...

  8. spark教程(18)-sparkSQL 自定义函数

    sparkSQL 也允许用户自定义函数,包括 UDF.UDAF,但没有 UDTF 官方 API class pyspark.sql.UDFRegistration(sparkSession)[sour ...

  9. T100——按xls格式批量导入数据

    弹出File Browser窗口 PRIVATE FUNCTION cxrt020_open_file() DEFINE l_dir LIKE type_t.chr500 DEFINE r_succe ...

  10. Scala学习七——包和引入

    一.本章要点 包也可也可以像内部类那样嵌套 包路径不是绝对路径 包声明链x.y.z并不自动将中间包x和x.y变成可见 位于文件顶部不带花括号的包声明在整个文件范围内有效 包对象可以持有函数和变量 引入 ...