vue-router 的最基本介绍

创建单页应用，最主要的是路由。

作用：

我们需要将组件（components）映射到路由(routes),然后告诉路由在哪个地方去渲染组件

vue-router的使用步骤：

1.安装 （安装的方式分为两种）

      a:直接下载，使用script标签进行引入

//下载地址，在官方文档有最新的
//script标签的引入
<script src="/path/to.vue.js"></script>
<script src="/path/to/vue-router.js"></script>

        b: 使用npm 进行安装

// 进入项目文件，右击-git Bash  -输入命令

npm install vue-router

 2. 将路由引入项目使用

// 项目目录 ：src-router-index.js

index.js

import Vue from 'vue'
//1.引入vue-router 别名为Router
import Router from 'vue-router'

// 2.vue使用Router这个封装好的组件(如果是使用全局的script标签，无需如此)
Vue.use(Router)

// 3.创建路由实例
const router = new Router({
   routes: [
    {
      path:...,
      name:....,
      component:....
    }
   ]
})

//4.将创建的路由实例导出
export default router

3.告诉路由在哪个地方渲染映射的组件

// 在某个组件
xxx.vue

<template>
  <div>
    <h1>路由匹配到的组件将在这里渲染</h1>
    <router-view/>
  </div>
</template>

4. 在main.js 主文件中挂载创建的根实例（这样让整个项目都有路由的功能）

main.js

import router from './router'
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})