一、路由：

1、后端路由：

　　对于普通网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

2、前端路由：

　　对于单页面应用程序来说，主要通过URL中的hash(#号）来实现不同页面之间的切换，同时，hash之间有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

3、在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由！！！

二、安装：

官网：https://router.vuejs.org/zh/installation.html

JS：https://unpkg.com/vue-router/dist/vue-router.js

三、使用：

1、导入及创建对象：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>路由</title>
  8.     <script src="./lib/vue.js"></script>
  9.     <!-- .安装vue-router路由模块 -->
  10.     <script src="./lib/vue-router.js"></script>
  11.     <style></style>
  12.   </head>
  13.   <body>
  14.     <div id="app">
  15.       <!-- <a href="#/login">登录</a>
  16.       <a href="#/register">注册</a> -->
  17.  
  18.       <!-- router-link 默认渲染成一个 a 标签 -->
  19.       <router-link to="/login" tag="span">登录</router-link>
  20.       <router-link to="/register">注册</router-link>
  21.  
  22.       <!-- 这是 vue-router 提供的元素，专门用来当做占位符的，将来，
  23.       路由规则，匹配到的组件，就会展示到这个 router-view 中去-->
  24.       <!-- 我们可以把 router-view 认为是一个占位符 “ 留坑” -->
  25.       <router-view></router-view>
  26.     </div>
  27.  
  28.     <script>
  29.       var login = {
  30.         template: "<h1>登录组件</h1>"
  31.       };
  32.       var register = {
  33.         template: "<h1>注册组件</h1>"
  34.       };
  35.       // 2.创建一个路由对象，当导入 vue-router 包之后，在 window 全局对象中，就有了
  36.       //一个路由的构造函数，叫做 VueRouter
  37.       // 在new 路由对象的时候，可以为 构造函数，传递一个配置对象
  38.       var routerObj = new VueRouter({
  39.         // route 这个配置对象中的 route 表示【路由匹配规则】的意思
  40.         routes: [
  41.           //路由匹配规则
  42.           // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
  43.           // 属性1：path 表示监听哪个路由链接地址
  44.           // 属性2： component 表示，如果路由是前面匹配到的 path，则展示 component 属性对应的那个组件
  45.           //component 的属性值，必须是一个组件的模板对象，不能是组件的引用名称
  46.           { path: "/login", component: login },
  47.           { path: "/register", component: register }
  48.         ]
  49.       });
  50.       var vm = new Vue({
  51.         el: "#app",
  52.         data: {},
  53.         methods: {},
  54.         // 将路由规则对象，注册到VM 实例上，用来监听 url地址的变化，然后展示对应的组件
  55.         router: routerObj
  56.       });
  57.     </script>
  58.   </body>
  59. </html>

2、重定向（打开时默认导向的位置：可以在地址栏上查看区别）

  1.  { path: "/", redirect: "/login" },

例子中，是默认打开时就导向login页面

3、设置路由高亮的方式（两种：第二种直接样式里定义即可）：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>路由</title>
  8.     <script src="./lib/vue.js"></script>
  9.     <!-- 1.安装vue-router路由模块 -->
  10.     <script src="./lib/vue-router.js"></script>
  11.     <style>
  12.       /* 2.第二种设置路由高亮的方式---直接设置，不需要再定义 */
  13.       .router-link-active {
  14.         color: red;
  15.         font-weight: 800;
  16.         font-style: italic;
  17.         font-size: 80px;
  18.         text-decoration: underline;
  19.         background-color: green;
  20.       }
  21.       /* 1.1第一种设置路由高亮的方式--需要定义下 */
  22.       .myactive {
  23.         color: red;
  24.         font-weight: 800;
  25.         font-style: italic;
  26.         font-size: 80px;
  27.         text-decoration: underline;
  28.         background-color: green;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div id="app">
  34.       <!-- <a href="#/login">登录</a>
  35.       <a href="#/register">注册</a> -->
  36.  
  37.       <!-- router-link 默认渲染成一个 a 标签 -->
  38.       <router-link to="/login">登录</router-link>
  39.       <router-link to="/register">注册</router-link>
  40.  
  41.       <!-- 这是 vue-router 提供的元素，专门用来当做占位符的，将来，
  42.       路由规则，匹配到的组件，就会展示到这个 router-view 中去-->
  43.       <!-- 我们可以把 router-view 认为是一个占位符 “ 留坑” -->
  44.       <router-view></router-view>
  45.     </div>
  46.  
  47.     <script>
  48.       var login = {
  49.         template: "<h1>登录组件</h1>"
  50.       };
  51.       var register = {
  52.         template: "<h1>注册组件</h1>"
  53.       };
  54.       // 2.创建一个路由对象，当导入 vue-router 包之后，在 window 全局对象中，就有了
  55.       //一个路由的构造函数，叫做 VueRouter
  56.       // 在new 路由对象的时候，可以为 构造函数，传递一个配置对象
  57.       var routerObj = new VueRouter({
  58.         // route 这个配置对象中的 route 表示【路由匹配规则】的意思
  59.         routes: [
  60.           //路由匹配规则
  61.           // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
  62.           // 属性1：path 表示监听哪个路由链接地址
  63.           // 属性2： component 表示，如果路由是前面匹配到的 path，则展示 component 属性对应的那个组件
  64.           //component 的属性值，必须是一个组件的模板对象，不能是组件的引用名称
  65.           // redirect 是重定向，定义打开页面的默认的导向哪个页面，可以在地址栏中具体查看
  66.           { path: "/", redirect: "/login" },
  67.           { path: "/login", component: login },
  68.           { path: "/register", component: register }
  69.         ]
  70.         // 1.2第一种设置路由高亮的方式--需要定义的部分
  71.         //  linkActiveClass: "myactive"
  72.       });
  73.       var vm = new Vue({
  74.         el: "#app",
  75.         data: {},
  76.         methods: {},
  77.         // 将路由规则对象，注册到VM 实例上，用来监听 url地址的变化，然后展示对应的组件
  78.         router: routerObj
  79.       });
  80.     </script>
  81.   </body>
  82. </html>

4、设置路由的动画：

样式内加上：

  1.  .v-enter,
  2.       .v-leave-to {
  3.         opacity: 0;
  4.         transform: translateX(150px);
  5.       }
  6.       .v-enter-active,
  7.       .v-leave-active {
  8.         transition: all 0.8s ease;
  9.       }

然后：

  1. <transition mode="out-in">
  2.         <router-view></router-view>
  3.  </transition>

Vue学习之路由vue-router小结（九）的更多相关文章

  1. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  2. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

  3. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  4. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  5. day 80 Vue学习一之vue初识

    Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...

  6. Vue学习之路由vue-router传参及嵌套小结（十）

    一.路由传递参数: 1.使用query传值: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

  8. vue学习之六路由系统

    一.vueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改变,从而不断修改组件内容来实现的,我们来试试不使用VueRouter,自己实现路由控制,如下代码: <!DOCTY ...

  9. vue学习笔记：vue的认识与特点与获取

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

  10. day 83 Vue学习三之vue组件

    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...

随机推荐

  1. js数组详解，js数组操作

    转自 http://www.cnblogs.com/qiantuwuliang/archive/2011/01/08/1930499.html 1.数组的创建 var arrayObj = new A ...

  2. opencv4.0.0+cmake编译(含contrib)

    https://blog.csdn.net/bobo184/article/details/88749651 前言笔者环境:win10+vs2015+cmake3.8.2 介绍下4.0.0的新特性,沿 ...

  3. hibernate关联关系 (多对多)

    hibernate的多对多 hibernate可以直接映射多对多关联关系(看作两个一对多  多对多关系注意事项 一定要定义一个主控方 多对多删除 主控方直接删除 被控方先通过主控方解除多对多关系,再删 ...

  4. 分布式文件系统HDFS

    利用Shell命令与HDFS进行交互 以”./bin/dfs dfs”开头的Shell命令方式 1.目录操作 在HDFS中为hadoop用户创建一个用户目录(hadoop用户) 启动hadoop 创建 ...

  5. 运维-安装rabbitmq 集群

    服务器:   online-platform-rabbitmq-01 online-platform-rabbitmq-02 online-platform-rabbitmq-03 绑定HOSTS: ...

  6. QML学习(五)——<TextInput和TextEdif输入框>

    这一篇来看两个用于文本输入的项目,分别是作为单行文本输入的 TextInput 和多行文本输入的 TextEdit . 下面开始教程. TextInput TextInput 项目用来显示单行可编辑的 ...

  7. 【Python + Selenium3】自动化测试之DDT数据驱动并生成测试报告以及用yagmail邮件发送文件

    我的文件路径 一.DDT代码: import unittest from time import sleep from selenium import webdriver from ddt impor ...

  8. Range Sum Query - Mutable 精简无递归线段树

    操作: 单点更新,区间求和 区间求和:如sum [3,10) 需要对19,5,12,26节点求和即可. 观察可知,左端点为右子节点(奇数)时直接相加,右端点为左子节点(偶数)时直接相加,两边向中间移动 ...

  9. 洛谷P5017：摆渡车——题解

    https://www.luogu.org/problem/P5017 参考:https://www.luogu.org/blog/ztyluogucpp/solution-p5017 我想我大概是废 ...

  10. Jenkins教程（四）安装BlueOcean与Maven构建

    前言 本文旨在使用BlueOcean实现构建可视化与使用Maven构建上一节Jenkins教程(三)添加凭据与流水线拉取Git代码拉下来的代码 什么是Blue Ocean Blue Ocean 重新思 ...