今天完成的事情：

1.继续学vue

2.推进任务

明天计划的事情：

1.继续推进任务

遇到的问题和收获：

1.配置一个基本的前端路由

①.安装vue-router

npm install vue-router --save

创建项目时已经选择过

②在模块化工程中使用

第一步：导入路由对象，且调用Vue.use（VueRouter）

第二步：创建路由实例，并且传入路由映射配置

第三步：在Vue实例中挂载创建的路由实例

我创建且使用的有

components是组件文件夹，创建的子组件都在这里。

router是路由相关的文件，index.js是路由配置的中转文件。

main.js是程序入口文件，加载各种公共组件。

routers中的结构，这里主要用来配置路由的，上面说过所有子路由都在App.vue下，所有App.vue是最外层的父路由，这里的routes中存的就是路由的数组，path就是你要访问你所创建的页面的路径，这里写的是根路径序所以你直接访问localhost:8080就会出现一个App.vue中插入一个HelloWorld.vue的页面（这个相当于路由嵌套），name想到与给它命名这个比较无关紧要，component相当于你要引用的页面，这里引用的是HelloWorld.vue这个页面，主要上面的import，这里的HelloWorld是一个变量，对应上面的路径文件。

在ariticleList.vue和ariticleDetails.vue两个子组件中

<template>
    <div>
        <h1>{{msg}}</h1>
    </div>
</template>

<script>
    export default {
        name: "articleList",
        data() {
            return {
                msg: '这是列表页'
            }
        }
    }
</script>

<template>
    <div>
        <h1>{{msg}}</h1>
    </div>
</template>

<script>
    export default {
        name: 'articleDetails',
        data(){
            return{
                msg:'这是详情页',
            }
        }
    }
</script>

注意style标签中的scoped属性，如果没写这条那么这个style的样式会影响到这个页面所有的子路由，如果加了那么这个样式只对当前页面起作用。

<style scoped>

</style>

在index.js中引入我的组件。并创建路由实例，routes是一个数组，可以有多个对象，path是路径，把需要的组件挂载进来。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import articleDetails from "@/components/articleDetails";
import articleList from "@/components/articleList";

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/articleDetails',
            name: 'articleDetails',
            component: articleDetails
        },
        {
            path: '/articleList',
            name: 'articleList',
            component: articleList
        }
    ]
})

在App.vue里使用到 <router-link to="路由配置中的路径">，从名字就可以看出来就是路由链接到那个路径，路径会匹配出相应的组件显示在 router-view 中

<template>
    <div>
        <router-link to="/articleList">这是article列表页</router-link>
        <router-link to="/articleDetails">这是article详情页</router-link>

        <router-view></router-view>

    </div>

</template>

结果：