vue路由学习-路由是什么

有关vue路由的学习过程

开发工具：vscode
事先准备：利用脚手架构建模板实例，具体构建过程可参考官方文档
https://cli.vuejs.org/zh/. （之后会补上cli脚手架的构建过程）

1. 路由介绍

路由安装指令：npm install vue-router --save

1.1 官方文档解释：

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

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

1.2 多应用于spa(single page web application)

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

1.3 路由说明

路由包括路由与路由器，一般通过路由器管理路由。而路由简单点说可以表示为映射关系，用多组键值对[key: 'value']来表示。
key中包含path，而路由中的path包含前台路由与后台路由，后台路由的value就是处理请求的回调函数，前台路由的value就是组件。

1.4 API说明

在VueRouter里暴露的是VueRouter()，一个用于创建路由器的构建函数

1.4.1 创建实例

new VueRouter({
// 多个配置项
})

1.4.2 配置路由

routes: [ //数组类型
	{ // 一般路由
	path: '/about',
	component: About
	},
	{ // 自动跳转路由
	path: '/',
	redirect: '/about'
	}
]

1.4.3 注册路由器

import router from './router'
new Vue({
router
})

1.4.4 使用路由组件标签

<router-link>: 用来生成路由链接
<router-link to="/xxx">Go to XXX</router-link>

<router-view>: 用来显示当前路由组件界面
<router-view></router-view>

最近刚好学到路由这部分，因此博客就决定从路由开始写，之后会慢慢补上vue的其他部分，补完会重新写上JS的部分，在学习vue的过程中发现自己对JS部分语法运用还不熟练，准备重新再看看教程。

学习教程：前端框架 Vue 视频教程全集