在学习之前我们需要先熟悉并记住以下的单词

单词：

router 路由，path 路径，meta 元信息，component 组件，
beforeEach 之前每次

SPA 单页面应用

Slingle Page Application
单页面应用
一个网站左右页面都集成在一个html文件里
通过切换div模拟页面的切换

原理

地址栏改变，不刷新页面，监听地址栏变化实现页面局部更新

优点

1. 资源共用
2. 前后端分离
3. 页面切换流畅

缺点

• 对SEO搜索引擎吧友好

Hash 路由

锚点（hash）变化不会刷新页面

window.onhashchange 事件

历史记录路由

H5新增特性

history.onpopstate
window.onpopstate

路由

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

创建路由

1. 

2. 

3. 

4. 

5. 

6. 

7. 
   

8. 到这里就安装成功了

项目里文件的解释

App.vue 内置组件

改变地址栏，改变hash的值

router-link

存放页面

router-view

scoped 样式隔离

• 给组件的每一个元素加一个属性
• 给css渲染器自动添加属性选择器
• scoped中的样式只能对当前组件启用

添加一个路由页面

1. views下面添加.vue文件
2. 链接切换到页面（可选）App.vue
3. 在router/index.js中配置

router/index.js 路由配置

普通

{
	path:"/user",
	name:"user",
	componet : () => import("user的.vue文件的路径")
}

传参

{
	path:"/user/:id",
	name:"user",
	componet : () => import("user的.vue文件的路径")
}

子路由

{
	path:"/admin",
	name:"admin",
	component:()=>import(xxx)
	children:[
		{
			path:"dash",
			name:"dash",
			component:()=>import(xxx),
		},
		{
			path:"event",
			​name:"event",
			component:()=>import(yyy),
		},
		// 重定向
		{
			path:"",
			redirect:"dash"
		​}
	​]
​}

404配置

1. 配置在最后面
2. path的值为’*’

	{
		path:"*",
		name:"nomatch",
		componnet : () => import ("../views/NoMatch.vue"),
	}