最基础的路由

使用注意事项：

安装vue-dev-tool工具：
    调试组件。
    下载：百度找  或者  翻墙去谷歌应用商店下载  得到一个xxx.crx文件。
    打开谷歌浏览器中的扩展程序：你只需要把这个插件拖到扩展程序中就OK了。
------------------------------------------
vue中的中路由：
    在讲express时，也说过路由：
        一个url，对应一个JOSN。
    在vue中，也有路由：
        一个是url，对应的一个组件
------------------------------------------
vue-router：
    是vue.js是官方推荐的路由插件。它和vue.js深度集成的，让我们非常方便构建单页应用。
------------------------------------------
依赖（第三方模块）分两类：
    1）开发依赖   在我们写代码时，需要的依赖
        npm i webpack --save-dev
        npm i webpack -D
    2）生产依赖  在项目上线后，也需要的依赖
        npm i jq --save   项目上线后，也需要jq
        npm i jq -S
------------------------------------------
安装：
    项目上线后，也需要此依赖。所以vue-router是生产依赖。
    npm i vue-router -S   // -S 等价于--save   表示vue-router是生产依赖
------------------------------------------

使用之：
1）在src目录下，创建一个routes这个文件夹，在此文件夹下面，创建一个router.js文件。
2）引入vue-router代码 ，是一个插件
3）导出路由对象
4）调用Vue.use（）使用插件
5）引入Vue
6）在导出路由对象处传递对象
①配置路由的模式 mode:"",
②配置路由规则 routes:[ {path:"/home",component:Home} ]一个对象就表示一个规则
7）引入对应的组件：import Home from “…/views/Home”;

    	// 引入Vue
import Vue from "vue";
// 引入vue-router模块  是一个插件
import Router from "vue-router";

// 引入对应的组件
import Home from "../views/Home";
import About from "../views/About";

// 调用Vue.use使用插件  只要是插件，在vue中必须使用Vue.use()
Vue.use(Router)

// 导出路由对象
export default new Router({
    // 1）配置路由的模式
    // 路由的模式：1）hash模式  2）history模式
    mode:"hash", // 使用hash模式  好处：1）兼容性好   不好：1）比较丑  2）不利用SEO
    // 2）配置路由规则
    routes:[
        {path:"/home",component:Home}, // 一个对象就表示一个规则
        {path:"/about",component:About}, // 一个对象就表示一个规则
    ]
})

8）aap.vue中：router-view是内部封装好的组件（路由的出口）

<router-view></router-view>

9）main.js（里边放的是根组件）中：引入路由模块 ：import router from “./routes/router”;
10) 在创建根组件时，挂载路由模块，它内部会把这个路由模块，混入到它的所有子组件中
11）vue-router内部又封装了一个组件，叫router-link，说白了，这个就是一个a标签

<router-link to="/home">首页</router-link>

12）scoped表示当前写的样式，只针对当前组件的模块，如果没有scoped，你写的样式，就可能作用于别的组件中

<style scoped>
    #home{}//home是当前组件名
</style>