什么是路由

  1. 后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源,这个对应关系就是后端中的路由;

  2. 前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;

  3. 在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由);

#后边的内容 称为哈希(Hash)

在 vue 中使用 vue-router

  1. 导入 vue-router 组件类库:

 <!-- 1. 导入 vue-router 组件类库 -->
  <script src="./lib/vue-router-2.7.0.js"></script>
 ​
  1. 使用 router-link 组件来导航(默认渲染为a标签。使用tag属性来设置要渲染成什么类型的元素)

 <!-- 2. 使用 router-link 组件来导航 -->
 <router-link to="/login">登录</router-link>
 <router-link to="/register">注册</router-link>
 ​
  1. 使用 router-view 组件来显示匹配到的组件

 <!-- 3. 使用 router-view 组件来显示匹配到的组件 -->
 <router-view></router-view>
 ​
  1. 创建使用Vue.extend创建组件    // 4.1 使用 Vue.extend 来创建登录组件    var login = Vue.extend({

       template: '<h1>登录组件</h1>'
    });
 ​
    // 4.2 使用 Vue.extend 来创建注册组件
    var register = Vue.extend({
      template: '<h1>注册组件</h1>'
    });
 ​
  1. 创建一个路由 router 实例,通过 routers 属性来定义路由匹配规则

 // 5. 创建一个路由 router 实例,通过 routers 属性来定义路由匹配规则
    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    });
 ​
  1. 使用 router 属性来使用路由规则

 // 6. 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      router: router // 使用 router 属性来使用路由规则
    });
 ​

理解:点击链接,修改url地址,路由监听到url地址改变后,进行路由规则匹配,匹配到后通过router-view来显示对应组件。

Vue学习笔记【26】——Vue路由(什么是路由)的更多相关文章

  1. 【Vue学习笔记】—— vue的基础语法 { }

    学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...

  2. vue学习笔记:vue的认识与特点与获取

    Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...

  3. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  4. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  5. vue学习笔记—bootstrap+vue用户管理

    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...

  6. Vue学习笔记之Vue学习前的准备工作

    0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...

  7. Vue学习笔记之Vue组件

    0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...

  8. Vue学习笔记之Vue知识点补充

    0x00 修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: &l ...

  9. Vue学习笔记之Vue指令系统介绍

    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...

  10. Vue学习笔记之Vue的使用

    0x00 安装 对于新手来说,强烈建议大家使用<script>引入 0x01 引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. ...

随机推荐

  1. Linux-PAM认证

    在新主机更改用户密码的时候,经常会出现"passwd: Have exhausted maximum number of retries for service"的报错 [root ...

  2. springColud父工程依赖配置

    <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot ...

  3. shell 读取文件的每一行

    1.使用while #!/bin/bash while read line do echo $line done < file.txt #!/bin/bash cat file.txt | wh ...

  4. tp框架数据查询,增删改

    select()是数据模型的一个指定方法,可以获得数据表的数据信息 返回一个二维数组信息,当前数据表的全部数据信息 $obj = D();  创建对象 $obj -> select();  查询 ...

  5. Database基础(一):构建MySQL服务器、 数据库基本管理 、MySQL 数据类型、表结构的调整

    一.构建MySQL服务器 目标: 本案例要求熟悉MySQL官方安装包的使用,快速构建一台数据库服务器: 安装MySQL-server.MySQl-client软件包 修改数据库用户root的密码 确认 ...

  6. error LNK2001: 无法解析的外部符号 __imp__Shell_NotifyIconA@8

    编译链接报错 error LNK2001: 无法解析的外部符号 __imp__Shell_NotifyIconA@8 解决方案: 在代码中添加链接库Shell32.lib #pragma commen ...

  7. mybatis plus CRUD

    首先我们的项目建立之后我们要建立一个实体类来对应我们的数据裤中的信息 employee import com.baomidou.mybatisplus.annotation.IdType; impor ...

  8. 23. requests安装与使用

    Windows下安装requests 在介绍requests库之前,先贴一下requests官网,当然也可以访问requests中文网站 requests官网给出以下介绍:Requests 唯一的一个 ...

  9. docker 安装 lnmp

    docker 安装 lnmp 标签(空格分隔): php,docker 安装MySql 1 搜索镜像 docker search mysql 2 安装镜像 docker pull mysql:5.7 ...

  10. activiti7从act_ge_bytearray表中查询资源文件并保存到桌面文件夹中

    package com.zcc.activiti02; import org.activiti.engine.ProcessEngine;import org.activiti.engine.Proc ...