vue路由——基础篇（一）

在完成vue脚手架搭建之后，开始进入vue路由的学习。本篇就是关于vue路由最基础的只是！！

在HTML页面中使用路由

想要在非 vue-cli（vue 脚手架）上使用路由，必须要引用Vue Router，而Vue Router需要单独下载或者以CDN的方式引用，具体地址为https://unpkg.com/vue-router/dist/vue-router.js。

使用路由的固定步骤：

1. 使用router-link组件设置导航链接，组件的 to 属性用于指定链接的URL，组件会被默认渲染成一个a 标签，也可以通过 tag 属性指定生成其他标签
2. 使用router-view组件设置组件渲染的地方，和router-link组件配套使用，可以理解为占位符
3. 定义路由组件
4. 定义路由，需要和router-link组件中to 属性一一对应
5. 创建 VueRouter 实例，
6. 在Vue根实例中使用routers 选项注入 上一步创建的 VueRouter 实例

	    <div id="app">
        <!-- 第一步 -->
        <router-link to="/">首页</router-link>
        <router-link to="/news">新闻</router-link>
        <router-link to="/books">图书</router-link>
        <!-- 第二步 -->
        <router-view></router-view>
    </div>
    <script>
        // 第三步
        const index = {
            template: `<div>这是首页</div>`
        };
        const news = {
            template: `<div>这是新闻页面</div>`
        };
        const books = {
            template: `<div>这是图书页面</div>`
        };
        // 第四步
        const routes = [{
            path: "/",
            component: index
        }, {
            path: "/news",
            component: news
        }, {
            path: "/books",
            component: books
        }];
        //第五步
        const router = new VueRouter({
            routes
        });
        let vm = new Vue({
            el: "#app",
            //第六步
            router: router
        })
    </script>

这就是简单的在页面上使用路由，需要注意的是，Vue Router默认使用的是hash模式，使用URL的hash来模拟完整的URL。

通过 vue-cli 基本使用路由

通过 vue-cli 脚手架搭建的项目会自动生成项目的骨架。在 vue-cli 创建的项目中，也可以使用路由的固定步骤，但是它们被分配在不同的文件中，最后通过引用结合在一起。

首先修改 App.vue 文件中模板内容：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">首页</router-link> |
      <router-link to="/books">图书</router-link>|
      <router-link to="/news">新闻</router-link>
    </div>
    <router-view/>
  </div>
</template>

然后再src/views目录下，创建 books.vue、news.vue和indexs.vue 文件

//news.vue
<template>
  <div class="hello">
    这是新闻
  </div>
</template>

//index.vue
<template>
  <div>
    这是首页
  </div>
</template>

//books.vue
<template>
  <div>
    这是图书
  </div>
</template>

修改src/router目录下的 index.js 文件，src/router 专门用于存放路由文件，而 index.js 是自动生成的用于配置路由信息的，我们进行如下继续修改：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Index from '../views/index.vue';
import Books from '../views/books.vue';
import News from '../views/news.vue';
Vue.use(VueRouter);

const routes = [{
        path: '/',
        component: Index,
    },
    {
        path: '/books',
        component: Books,
    }, {
        path: '/news',
        component: News,
    }
];

const router = new VueRouter({
    routes,
});
export default router;

在修改完成之后，我们就已经简单将路由配置完成了，这个只是基础的路由配置，在后面我们将更加深入的对路由进行学习。