Vue路由+Vue脚手架（详细教程）幼儿园难度

Vue路由

一、路由的概念

路由的本质就是一种对应关系（此处的路由含义同之前nodejs的路由），根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为：后端路由和前端路由

1. 前端路由：根据不同的事件来显示不同的页面内容，是事件与事件处理函数之间的对应关系
2. 概念：根据不同的用户事件，显示不同的页面内容（地址与事件产生对应关系）
3. 本质：用户事件与事件处理函数之间的对应关系

二、事前准备

1，

2，

3，

4，

5，

6，

7,

8，

完成啦！

三，打开C盘找到你创建的那个文件夹，我这里是myroute

1，打开文件夹是这样的（简单的介绍一下里面的文件夹，文件）

2，下面可以仔细看一下

3，添加一个路由页面

1. views/.vue文件
2. 链接切换到页面(可选)App.vue
3. router/index.js中配置

路由的基本使用已经有上面这些图解释差不多了！

---

下面是一些知识点，很重要也很详细！

四，知识点，属性 等等…

1，spa 单页面技术

1. singlePageApplication 一个网站的所有页面都集成在一个html文件里面通过切换div模拟页面的切换

2. 优点

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

3. 缺点

   1，对SEO搜索引擎不友好

4. 原理：

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

5. Hash 路由

   锚点(hash）变化不会刷新页面
   window.onhashchange

6. 历史记录路由

   H5新增特性
   history.onpopstate

2，路由配置

7. 普通
   

8. 传参

   

3，路由组件

1. router-link 切换路由
   to 属性 改变地址栏

2. router-view 存放路由

4，编程跳转 $router

1. .push(“/”) 跳转并添加一个历史记录
2. .replace(“/”) 跳转替换（不留历史记录）
3. .back() 返回
4. .forward() 前进
5. .go(-1) 返回一步
6. .go(1) 前进一步

5，当前路由对象

1. name 名称

2. params

   路由参数
   {id : abc}

3. path

   路径
   /produce/abc

4. fullpath

   全路径
   http://localhost:8080/#/produce/abc?name=mumu#good​

5. query

   查询参数

6. hash

   哈希

7. meta

   元信息

五，项目代码片段（小米移动端）

App.vue

<template>
	<div id="app">
		<router-view class="page has-tabs"></router-view>
		<nav class="tabs">
			<router-link class="link ahome" to="/">首页</router-link>
			<router-link class="link acate" to="/about">分类</router-link>
			<router-link class="link aball" to="/ball">米圈</router-link>
			<router-link class="link acart" to="/cart">购物车</router-link>
			<router-link class="link auser" to="/user">我的</router-link>
		</nav>
	</div>
</template>

<style>
	#app {
		width: 100vw;
		height: 100vh;
		position: relative;
	}

	.page {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
	}

	.has-tabs {
		bottom: 1rem;
	}

	.tabs {
		position: fixed;
		height: 1rem;
		width: 100%;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #eee;
		display: flex;
	}


	.tabs .link {
		/* 自适应宽，水平对齐  文字是9px 9px * 2 18px 0.18rem */
		flex: 1;
		text-align: center;
		font-size: 0.18rem;
	}

	/* .router-link-exact-active:before  当前路由精准匹配to的值（自带的） */
	/* .link和.router-link-exact-active:before 之间没有空格，紧紧贴着*/
	.tabs .link.router-link-exact-active:before {
		/* 文本选中时的颜色 */
		color: #f70;
	}

	/* 首页 */
	.tabs .link:before {
		/* 设置图标 */
		content: '';
		display: block;
		height: 0.5rem;
		width: 0.5rem;
		background: url(./assets/home.png);
		background-size: cover;
		margin: 0.1rem auto;
	}

	.tabs .ahome.router-link-exact-active:before {
		background-image: url(./assets/home-h.png);
	}

	/* 分类 */
	.tabs .acate:before {
		/* 选项未选中时的图片 */
		background-image: url(./assets/cat.png);
	}

	/* 选项选中时 修改图片 */
	.tabs .acate.router-link-exact-active:before {
		/* 选项选中时的图片 */
		background-image: url(./assets/cat-h.png);
	}

	/* 米圈 */
	.tabs .aball:before {
		/* 选项未选中时的图片 */
		background-image: url(./assets/ball.png);
	}

	/* 选项选中时 修改图片 */
	.tabs .aball.router-link-exact-active:before {
		/* 选项选中时的图片 */
		background-image: url(./assets/ball-h.png);
	}

	/* 购物车 */
	.tabs .acart:before {
		/* 选项未选中时的图片 */
		background-image: url(./assets/cart.png);
	}

	/* 选项选中时 修改图片 */
	.tabs .acart.router-link-exact-active:before {
		/* 选项选中时的图片 */
		background-image: url(./assets/cart-h.png);
	}

	/* 我的 */
	.tabs .auser:before {
		/* 选项未选中时的图片 */
		background-image: url(./assets/user.png);
	}

	/* 选项选中时 修改图片 */
	.tabs .auser.router-link-exact-active:before {
		/* 选项选中时的图片 */
		background-image: url(./assets/user-h.png);
	}
</style>

views/HomeView.vue

<template>
	<div class="home">
		<img alt="Vue logo" src="../assets/logo.png">
	</div>
</template>

<script>

</script>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [{
		path: '/',
		name: 'home',
		component: HomeView
	},
	{
		path: '/about',
		name: 'about',
		// route level code-splitting
		// this generates a separate chunk (about.[hash].js) for this route
		// which is lazy-loaded when the route is visited.
		component: () => import( /* webpackChunkName: "about" */ '../views/AboutView.vue')
	},
	{
		path: '/ball',
		name: 'ball',
		component: () => import('../views/BallView.vue')
	},
	{
		path: '/cart',
		name: 'cart',
		component: () => import('../views/CartView.vue')
	},
	{
		path: '/user',
		name: 'user',
		component: () => import('../views/UserView.vue')
	}
]

const router = new VueRouter({
	routes
})

export default router