route，它是一条路由，Home按钮 => home内容，这是一条route, about按钮 => about 内容，这是另一条路由。
routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 =>about 内容}]
router 是一个机制，相当于一个管理者，它来管理路由。因为routes只是定义了一组路由，它放在那里是静止的，当真正来了请求，怎么办？就是当用户点击home 按钮的时候，怎么办？这时router就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了home 内容。

一、SPA是什么？

SPA是指单页面一次性请求到web的所有代码（html、js、css），然后根据路由切换到不同模块的资源
单页面与多页面的不同在于以下几点：

相较于多页面（mpa）应用来说，单页面（spa）除了搜索引擎难以抓取外，各方面性能都是优于多页面应用的。

二、vue-router

1.hash模式

hash是体现在地址栏URL中的#符号

代码如下

URL：http://www.abc.com/#/hello

hash 的值为 #/hello。hash虽然出现在url中，但它不会被包括在http请求中的，所以改变hash不会重新加载页面，路由跳转是通过监听url中的hash来进行的

2.history模式

history —— 利用了HTML5 History Interface 中新增的push和replace两类方法。
相比于hash模式，history是通过在浏览器的历史记录栈中通过go、forward，对历史记录进行修改的功能，虽然这个history模式改变了相应的url地址，但是浏览器并不会向后端发送请求。

代码如下（示例）：

const router = new VueRouter（{
  mode：'history',
  routes:[...]
  })

该处即是使用了history模式，得到的url就不会有#而是/。

3.两种模式的比较

解释一个矛盾的地方：hash模式对于后台来说是一个url，地址中的hash值是不会传到后台的，所以服务器端做一个跟地址的映射就行-这就解释了为什么hash的值是不会传到后台的。

二、路由跳转

1.最基本的跳转：

to="/demo1"中的demo1为跳转的路由跳转位置。这种方式简便易懂，直接在标签中嵌入按钮就可以，但是不足的是不能够传递参数。

<router-link to="/demo1">点击跳转</router-link>

2.带参数的跳转：

name为跳转路由的名字（此处需要在index.js中配置)，params中为传递的参数的值，此种方法跳转简单，传参简单。易于操作。

<router-link v-bind:to="{name:'demo1',params:{userId:123}}">点击跳转传参</router-link>

//下面为在index.js中配置的代码
{
      path: '/demo1/:userId',
      name: 'demo1',
      component: Demo1
},

如果不想配置，也可以直接指向路径：

path:'/home/game'

<router-link v-bind:to="{path:'/home/demo1',params:{userId:123}}">点击跳转传参</router-link>

3.js跳转转：

通过在标签中加入button，点击button进入到toURL函数进行路由跳转。

<button @click="jump">跳转页面</button>

<script>
export default {
    data(){
        return{
        }
    },
    methods:{
        jump(){
            this.$router.push({name:'demo1',params:{userId:123},query:{plan:"public",sex:"female"}});
        }
    }
}
</script>

4.关于传参方式和子路由接收参数方式

vue中的路由传参主要是分为两种方式：params和query。

4.1 params传参：

此时浏览器的地址中是不会带有参数的，是类似post传参，并且刷新后参数会丢失。

 this.$router.push({name: 'myPathName', params: {id: '1234'}});

子路由获取参数的方式是：

let id = this.$route.params.id;

4.2 query传参：

query传参就类似get传参那样将参数写在路径后

 this.$router.push({path: '/myPathComp', query: {id: '1234'}});