# 一、路由基础介绍
# 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
});
