# 一、路由基础介绍

# 1.1 什么是前端路由

• 路由是根据不同的url地址展示不同的内容或页面
• 前端路由就是把不同的路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面实现的

# 1.2 什么时候使用前端路由

• 在单页面应用，大部分结构不变，只改变内容的使用

# 1.3 前端路由优点、缺点

• 优点：
  • 用户体验好，不需要每次都从服务器全部获取，快速展现给用户
• 缺点：
  • 不利于SEO
  • 使用浏览器的前进，后退键的时候会重新发送请求，没有合理的利用缓存
  • 单页面无法记住之前滚动的位置，无法再前进，后退的时候记住滚动的位置

# 二、vue-router用来构建SPA

# 2.1 开始

在你的文件夹下的 src 文件夹下的 main.js 文件内写入以下代码

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

• vue-router其实就是对history的封装
• 地址后面跟#其实就是用了hash

<div id="box"> 

</div>
<!--定义模版-->
<template id="a">
    <div>
        第一个router
    </div>
</template>
<template id="b">
    <div>
        第二个router
    </div>
</template>

var routes = [
    {
        path:"/one",

        component:{template:"#a"}
    },
    {
        path:"/two",
        component:{template:"#b"}
    },
];
// 定义路由组件
var router = new VueRouter({
    routes
});