前言

今天花一天时间阅读完Vue Router的官方文档的基础部分,简单的做一下总结和记录

Vue Router是什么

Vue Router 是 Vue.js 官方的路由管理器,用于构建单页应用(SPA)。地址栏url的变化并不会去发请求去服务器取新的页面,而是按需加载局部组件,看起来就像无刷新一样。包括的功能包括:

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式,在 IE9 中自动降级
  • 自定义的滚动条行为

实际上路由的用途是用路由配置表来控制 url 对应的跳转地址,地址对应的可以是基础视图组件或者布局组件,可以用于灵活的视图导航。

安装

  • 直接下载 / CDN

    下载地址:https://unpkg.com/vue-router/dist/vue-router.js

    然后通过js引入进来:

      <script src="/path/to/vue.js"></script>
    <script src="/path/to/vue-router.js"></script>
  • NPM

    安装npm包:

      npm install vue-router

    然后通过Vue.use()引入:

      import Vue from 'vue'
    import VueRouter from 'vue-router' Vue.use(VueRouter)

基本用法

Vue Router的API和Vuex类似,new VueRouter 构建出一个路由实例,然后提供了<router-link> 组件用于写链接,<router-view> 组件用于展示,Router的构建选项中最重要的就是 routes ,它用来定义路由的规则。

一个简单的路由例子:

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
  // 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)

  // 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' } // 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
] // 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
}) // 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app') // 现在,应用已经启动了!

动态路由

通过使用:动态路径参数来做动态路由,使用通配符 (*)来匹配任意路径,作为捕获任意路径和404路径。详细请参考:链接地址

嵌套路由

路由是支持嵌套的,routes中的 children 配置用来写嵌套路由配置,然后嵌套的路由可以在组件的 <router-view> 做嵌套展示。

编程式的导航

除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。主要采用router.push(location, onComplete?, onAbort?)这个方法,另外还提供了router.replace(location, onComplete?, onAbort?)router.go(n)这两个不常用的方法,具体用法参考:链接地址

命名路由

除了直接用 path 指定路由的路径外,可以用 name 给路由取一个别名方便使用,具体参考:链接

命名视图

可以给视图也取名字方便使用, router-view 组件的 name 属性指定,不给的话默认为 default 名字的。

重定向和别名

重定向也是通过 routes 配置来完成,配置采用 redirect 。例子:

  const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})

别名采用 alias 来命名。

路由组件传参

使用 props 将组件和路由解耦,让路由可以传参数给组件,达到动态配置目的。例子:

  const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true }, // 对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项:
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})

props 可以是布尔、对象和函数,具体用法参考:链接地址

HTML5 History 模式

vue-router 默认 hash 模式 ,会让url地址里面带有#符号,非常丑陋而且让锚点语法无法使用,所以需要 history 模式,例子:

  const router = new VueRouter({
mode: 'history',
routes: [...]
})

路由懒加载

结合 Vue异步组件Webpack 的代码分割功能,轻松实现路由组件的懒加载(路由被访问的时候才加载对应组件)。例子:

  routes: [
{
path: "/user",
component: () =>
import(/* webpackChunkName: "layout" */ "./layouts/UserLayout")
}
]

路由的其他主题

其他主题包括:

对于这些主题,感兴趣的可以再点击链接学习,根据2/8定律,不作为学习的重点,用到再看。

从零开始的vue学习笔记(八)的更多相关文章

  1. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  2. 从零开始的vue学习笔记(一)

    前言 项目要用vue.js,今天开始自学vue.js官方教程,记录下自己的学习摘要,方便后面查阅(此笔记按照学习天数,每天一篇) Vue.js是什么 Vue是一套用于构建用户界面的渐进式框架,Vue ...

  3. 从零开始的vue学习笔记(五)

    单文件组件 Vue.component 来定义全局组件的缺点: 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复 字符串模板 (String te ...

  4. Vue学习笔记八:v-for,v-if,v-show指令

    目录 v-for指令:遍历 HTML和效果图 v-for讲解 v-if和v-show:创建,删除,显示,隐藏 HTML和效果图 v-if和v-show的原理 v-for指令:遍历 HTML和效果图 有 ...

  5. 从零开始的vue学习笔记(二)

    数据与方法 当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中.data的数据和视图同步更新. 实例创建后添加一个新的属性,对这个属性的的改动将不会触发任何 ...

  6. 从零开始的vue学习笔记(四)

    组件注册 组件名 Vue.component('my-component-name', { /* ... */ }) 这里的my-component-name就是组件名,组件名的取法可以参考指南 ke ...

  7. 从零开始的vue学习笔记(七)

    前言 今天花一天时间阅读完vuex的官方文档,简单的做一下总结和记录 Vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,以前的符合"单向数据流"理念的 ...

  8. 从零开始的vue学习笔记(六)

    混入 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.简单解释就是把一个Vue组件中的内容提供给别的组件来用.例子: // 定义一个混入对象 var myMixin ...

  9. 从零开始的vue学习笔记(三)

    事件处理 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码,示例: <div id="example-2"> <!-- `gree ...

随机推荐

  1. 使用图灵机器人api搭建微信聊天机器人php实现

    之前通过hook技术实现了微信pc端发送消息功能,如果在结合图灵机器人就能实现微信聊天机器人. 代码下载:http://blog.yshizi.cn/131.html 逻辑如下: 下面我简单介绍一下步 ...

  2. [币严区块链]BitcoinCash - BCH钱包地址生成与扫块充值监控(JAVA版)

    本文的方案无需自建节点,因为BCH当前区块数据大小已经达到200G以上,BTC区块数据也已超过300G,若每个币都自建节点,对云服务器的消耗会非常大. 认识BitcoinCash(BCH) Bitco ...

  3. ES6-数组的新方法

    1.Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型. Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7)创建一个 ...

  4. C# 10分钟入门基于WebOffice实现在线编辑文档,实时保存到服务器(所有office,兼容WPS)

    今天,他来了(weboffice在线编辑文档). 上次写了一个在线预览的博,当然,效果并不是太理想,但是紧急解决了当时的问题. 后来,小编重新查找资料,求助大牛,终于使用新的方式替换了之前的low方法 ...

  5. zipkin+elk微服务日志收集分析系统

    docker安装elk日志分析系统 在win10上安装docker环境 tip:win7/8 win7.win8 系统 win7.win8 等需要利用 docker toolbox 来安装,国内可以使 ...

  6. PHPSTORM 2019 激活

    1.获取激活码 请自行百度 2.输入激活码 ​ 3.配置本地hosts 添加配置如下​ 0.0.0.0 account.jetbrains.com 0.0.0.0 www.jetbrains.com

  7. Android Studio [水平布局LinearLayout]

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  8. Sentinel Cluster流程分析

     前面介绍了sentinel-core的流程,提到在进行流控判断时,会判断当前是本地限流,还是集群限流,若是集群模式,则会走另一个分支,这节便对集群模式做分析. 一.基本概念  namespace:限 ...

  9. idea 环境变量设置编码

    1.打开Run/Debug Configuration,选择你的tomcat 2.然后在  Server > VM options 设置为 -Dfile.encoding=UTF-8

  10. 容器技术----------->Docker

    1. 虚拟化 1)什么是虚拟化 在计算机中,虚拟化(英语:Virtualization)是一种资源管理技术,是将计算机的各种 实体资源,如服务器.网络.内存及存储等,予以抽象.转换后呈现出来,打破实体 ...