什么是路由

  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. python3.x filter,map,reduce浅析

    #map用法: #传递函数api进入map去执行,把字符串第一个字母变大写, #其他变小写返回 def format_name(s): s=s.lower() print(s) return s[0] ...

  2. python 环境准备-centos7

    python3环境搭建[本身centosyum底层也是py2.x实现的,装3.x的时候要实现多版本共存这里解决了这些问题] 安装编译环境# yum -y groupinstall 'Developme ...

  3. maven知识

    首先下载maven 然后win的配置环境变量 maven目录结构 --main --java --package --test --java --package resources maven 需要有 ...

  4. js中按下回车触发事件

    方法一:document.onkeydown = function (e) { // 回车提交表单// 兼容FF和IE和Opera var theEvent = window.event || e; ...

  5. boost pointer container

    1. boost::ptr_vector #include <boost/ptr_container/ptr_vector.hpp> #include <iostream> i ...

  6. paper 135:关于C#泛型的知识点

    计划着要用一个月的时间把  C#语言Windows程序设计 搞定,现在是零零散散的知识点,日积月累吧!朋友们,看这里咯~呵呵 原文地址:http://www.blogjava.net/Jack2007 ...

  7. echarts(4.0版本)

    1.echarts 开发文档 :https://echarts.baidu.com/echarts2/doc/doc.html  或  https://echarts.baidu.com/option ...

  8. 关于UI自动化测试的思考

    不知不觉,时间过去了二年多,从开始想学习自动化(UI自动化到上手做项目)到上手,到能独立开发一个项目的UI自动化脚本. 一直在学习,边做边学,边看边学.边总结(具体看我的博客,其中大部分都是自己的理解 ...

  9. 性能测试基础 ---TCP通信过程的状态码与过程,以及出现错误码的分析(TIME_WAIT,CLOSE_WAIT)

    TCP通信过程 如下图所示,TCP通信过程包括三个步骤:建立TCP连接通道(三次握手).数据传输.断开TCP连接通道(四次挥手). 这里进一步探究TCP三路握手和四次挥手过程中的状态变迁以及数据传输过 ...

  10. shell 从函数文件中调用函数的方法

    你可以把所有的函数存储在一个函数文件中 你可以把所有的文件函数加载到当前脚本或命令行 加载函数文件中所有函数的方法: source xxx.sh