从零开始的vue学习笔记(八)
前言
今天花一天时间阅读完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学习笔记(八)的更多相关文章
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- 从零开始的vue学习笔记(一)
前言 项目要用vue.js,今天开始自学vue.js官方教程,记录下自己的学习摘要,方便后面查阅(此笔记按照学习天数,每天一篇) Vue.js是什么 Vue是一套用于构建用户界面的渐进式框架,Vue ...
- 从零开始的vue学习笔记(五)
单文件组件 Vue.component 来定义全局组件的缺点: 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复 字符串模板 (String te ...
- Vue学习笔记八:v-for,v-if,v-show指令
目录 v-for指令:遍历 HTML和效果图 v-for讲解 v-if和v-show:创建,删除,显示,隐藏 HTML和效果图 v-if和v-show的原理 v-for指令:遍历 HTML和效果图 有 ...
- 从零开始的vue学习笔记(二)
数据与方法 当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中.data的数据和视图同步更新. 实例创建后添加一个新的属性,对这个属性的的改动将不会触发任何 ...
- 从零开始的vue学习笔记(四)
组件注册 组件名 Vue.component('my-component-name', { /* ... */ }) 这里的my-component-name就是组件名,组件名的取法可以参考指南 ke ...
- 从零开始的vue学习笔记(七)
前言 今天花一天时间阅读完vuex的官方文档,简单的做一下总结和记录 Vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,以前的符合"单向数据流"理念的 ...
- 从零开始的vue学习笔记(六)
混入 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.简单解释就是把一个Vue组件中的内容提供给别的组件来用.例子: // 定义一个混入对象 var myMixin ...
- 从零开始的vue学习笔记(三)
事件处理 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码,示例: <div id="example-2"> <!-- `gree ...
随机推荐
- 使用图灵机器人api搭建微信聊天机器人php实现
之前通过hook技术实现了微信pc端发送消息功能,如果在结合图灵机器人就能实现微信聊天机器人. 代码下载:http://blog.yshizi.cn/131.html 逻辑如下: 下面我简单介绍一下步 ...
- [币严区块链]BitcoinCash - BCH钱包地址生成与扫块充值监控(JAVA版)
本文的方案无需自建节点,因为BCH当前区块数据大小已经达到200G以上,BTC区块数据也已超过300G,若每个币都自建节点,对云服务器的消耗会非常大. 认识BitcoinCash(BCH) Bitco ...
- ES6-数组的新方法
1.Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型. Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7)创建一个 ...
- C# 10分钟入门基于WebOffice实现在线编辑文档,实时保存到服务器(所有office,兼容WPS)
今天,他来了(weboffice在线编辑文档). 上次写了一个在线预览的博,当然,效果并不是太理想,但是紧急解决了当时的问题. 后来,小编重新查找资料,求助大牛,终于使用新的方式替换了之前的low方法 ...
- zipkin+elk微服务日志收集分析系统
docker安装elk日志分析系统 在win10上安装docker环境 tip:win7/8 win7.win8 系统 win7.win8 等需要利用 docker toolbox 来安装,国内可以使 ...
- PHPSTORM 2019 激活
1.获取激活码 请自行百度 2.输入激活码 3.配置本地hosts 添加配置如下 0.0.0.0 account.jetbrains.com 0.0.0.0 www.jetbrains.com
- Android Studio [水平布局LinearLayout]
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- Sentinel Cluster流程分析
前面介绍了sentinel-core的流程,提到在进行流控判断时,会判断当前是本地限流,还是集群限流,若是集群模式,则会走另一个分支,这节便对集群模式做分析. 一.基本概念 namespace:限 ...
- idea 环境变量设置编码
1.打开Run/Debug Configuration,选择你的tomcat 2.然后在 Server > VM options 设置为 -Dfile.encoding=UTF-8
- 容器技术----------->Docker
1. 虚拟化 1)什么是虚拟化 在计算机中,虚拟化(英语:Virtualization)是一种资源管理技术,是将计算机的各种 实体资源,如服务器.网络.内存及存储等,予以抽象.转换后呈现出来,打破实体 ...