[记录]一、Vue 项目是如何运转的？

1.SPA的挂载页面 —— Index.html

SPA：单页面应用程序。

https:           //1、页面请求的协议。
www.cnblogs.com  //2、为页面所属的域名。
p/9629026.html   //3、是匹配到某一篇文章的id。
?test=2          //4、页面通过 url 传递 get 请求的参数
#index           //5、为页面的锚点区域

对于单页面应用程序，只有一个「单页面」提供入口，根据url的不同路由配置，从而达到页面不刷新的效果。
index.html页面，整个项目都是在这个文件的基础上进行变化。

2.App.vue 页面所有路由对应组件的容器

SPA的原理：
只有一个页面，所以就必须有一个空的容器，根据当前路由，将不同的子组件内容填充到 App.vue 容器里。

  <div id="app">
    <div id="nav">
    </div>
    <router-view/>//这里就是 路由子组件容器
  </div>

3.main.js 入口文件，初始化vue实例并使用需要的插件

main.js 通过实例化 vue ，并把组件和入口页面联系起来。

4.router.js 路由文件，配置着 url 路径和页面的关系

二、深入说明vue-router的工作原理

1.页面实现（html模板中）

2.js中配置路由

首先要定义route，一条路由的实现。
它是一个对象，由两个部分组成：path 和 component，path指路径，component指组件。

举例：
const routes = {
  { path: '/home', component:Home },
  { path: '/about', component:About }
}

最后创建router对路由进行管理，它是由构造函数 new vueRouter()创建，接受routes参数。

const router = new VueRouter({
    routes //routes: routes 的简写
})

配置完成后，把router实例注入到vue根实例中，就可以使用路由了

const app = new Vue({
  router
}).$mount('#app')

借鉴：https://www.cnblogs.com/laozhang-is-phi/p/9640974.html