1 ajax
2 锚点的使用（window.location.hash #）
3 hashchange 事件 window.addEventListener("hashchange",function () {})
4 监听锚点值变化的事件，根据不同的锚点值，请求相应的数据
5 原本用作页面内部进行跳转，定位并展示相应的内容

3. 路由思路

1、确保引入Vue.vue-router的js依赖
2、首先需要定义组件（就是展示不同的页面效果）
3、需要将不同的组件放入一个容器中（路由集合）
4、将路由集合组装成路由器
5、将路由挂载到Vue实例中
6、定义锚点
7、跳转

导入依赖

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	<!-- 1、引入路由js依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

创建自定义组件，例如：Home和Abort组件

// 2、定义组件    首页对应的组件、关于对应的组件
		const Home = Vue.extend({
			template :"<div>这是首页内容，展示最新的十篇博客</div>"
		});
		const About = Vue.extend({
			template :"<div>这是关于本站显示的内容区域，本站的发展史</div>"
		});

注1：extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件
你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用car组件

注2：也可以用以前的方式创建和获得组件，效果也是一样的
Vue.component("button-counter", {...});//创建组件
var ButtonCounter = Vue.component('button-counter');//获得组件

定义路由跳转路径集合

//3.定义路由跳转路径集合   let  ES6特性  代表不是对象
    // path代表跳转路径  component代表指向路径
    let  routes = [{
        path:'/',
        component:Home
    },{
        path:'/Home',
        component: Home
    },{
        path:'/Abort',
        component: Abort
    }];

得到路由对象

 const router = new VueRouter({routes:routes});

将路由与Vue实例进行挂载

new Vue({
        el:"#app",
        //5.将路由与Vue实例进行挂载
        router,
        data(){
            return{
                msg:'hello Vue'
            }
        }
    });

定义锚点

 <!-- 6.定义组件存放的位置，定义锚点-->
    <router-view></router-view>

路由组件跳转触发点

<!-- 7.路由组件跳转触发点 -->
    <router-link to="/" >首页</router-link>
    <router-link to="/Abort">关于本站</router-link>

总页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
</head>
<body>
<div id="app">
    <!-- 7.路由组件跳转触发点 -->
    <router-link to="/" >首页</router-link>
    <router-link to="/Abort">关于本站</router-link>
    <!-- 6.定义组件存放的位置，定义锚点-->
    <router-view></router-view>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

<script>
    //2.定义需求中需要用到的组件
    //const也是es6写法，代表该变量是对象
    const Home = Vue.extend({
        template:"<div><p>这是博客内容页面</p><div>具体的博客内容</div></div></div>"
    })

    const Abort = Vue.extend({
        template:"<div><p>这是关于本站的页面</p><div>本站的意义，发展史</div></div></div>"
    })

    //3.定义路由跳转路径集合   let  ES6特性  代表不是对象
    // path代表跳转路径  component代表指向路径
    let  routes = [{
        path:'/',
        component:Home
    },{
        path:'/Home',
        component: Home
    },{
        path:'/Abort',
        component: Abort
    }];

    // 4.得到路由对象
    const router = new VueRouter({routes:routes});

    //绑定边界 ES6具体体现
    new Vue({
        el:"#app",
        //5.将路由与Vue实例进行挂载
        router,
        data(){
            return{
                msg:'hello Vue'
            }
        }
    });

</script>

</body>
</html>

运行结果：

二、无痕浏览

主要用到一个语句replace
实现原理，如果在标签加入relpace，那么当我们重复访问时，系统就会自动删除跟加了relpace无关的标签

三、NodeJs环境搭建

1. Nodejs是什么？

Node.js是javaScript的运行环境

npm是Node.js的包管理工具

2. 下载

网址：Node.js的下载地址

然后点击下载即可，本篇博客博主使用的是node-v10.15.3-win-x64.zip （下列例子也都是在这个版本中运行，当然大家可下载合适自己的版本）

3.nodejs环境搭建

3.1下载后进行解压

解压压缩包后（记得放在非中文目录下）

解压后在nodeJS的解压包，在根目录下新增两个文件夹node_global和node_cache

3.2 配置环境变量

找到我的电脑右键属性 点击高级系统设置点击环境变量然后在系统变量中新增系统变量

变量名为：NODE_HOME

变量值为：刚刚解压的那个node-v10.15.3-win-x64文件夹的路径：E:\temp\T280\node-v10.15.3-win-x64（这是博主的）

然后修改Path的变量值：

将%NODE_HOME%;%NODE_HOME%\node_global添加进去

配置完成后wind+s 输入 cmd 进入命令提示符

输入指令：node -v和npm -v 输入步骤如下：

输入完成后，进行下一步：

配置npm全局模块路径和cache默认安装位置
打开cmd，分开执行如下命令：
npm config set cache "E:\temp\T280\node-v10.15.3-win-x64\node_cache"

（这里双引号里面放你之前新建的那个cache文件夹的路径，下面那个路径则是放另一个文件夹的路径）
npm config set prefix "E:\temp\T280\node-v10.15.3-win-x64\node_global"

然后再将npm config set registry https://registry.npm.taobao.org/指令放到cmd里面进行下载github的Vue的项目解压

注1：将步骤一创建的node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来
注2：如果执行命令卡死，可以删除C:\Users\用户名\.npmrc 后重新执行。（用户名：为当前电脑的用户名）
注3："D:\initPath\node-v10.15.3-win-x64\node_global"，双引号不能少

然后我们在cmd中

可以修改npm镜像提高下载速度(可以使用 cnpm 或直接设置 --registry ，推荐设置 --registry)

registry
## 设置淘宝源
npm config set registry https://registry.npm.taobao.org/
## 查看源，可以看到设置过的所有的源
npm config get registry

注1：其实此步骤的内容就是将以下代码添加到C:\Users\用户名\.npmrc文件中
registry=https://registry.npm.taobao.org

下载github的Vue的项目解压