今天完成的事情：

1.进入vue学习

明天计划的事情：

1.继续学习vue，推进任务

遇到的问题和收获：

1.vue router

新建项目时选择创建路由，则会生成router文件夹，index.js文件。也可以自己创建，进行配置即可。

首先引入配置文件，从安装的路由里面导入路由，

//配置路由相关信息
import VueRouter from 'vue-router'
import  Vue from  'vue'

VueRouter插件通过vue.use进行安装。调用vue方法时也需要先引入vue

//通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

再创建一个新的VueRouter对象，并且内部传入routers对象，它的作用是配置路由和组件的映射关系。

const routes=[

]

const router=new VueRouter({
//配置路由和组件之间的应用关系
routes
})

最后将其导出

//将router对象传入Vue实例中
export default router

在main.js里引入router，并在vue实例里注册。

import router from  './router/index'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

此处./router/index也可以只写./router,它会自动寻找router文件夹下面的index.js文件。以上步骤是搭建路由的框架。

routes里，一个映射关系就是一个对象。

首先创立路由组件

然后在index.js里引入

import Home from '../components/home'
import About from  '../components/about'

const routes = [
    {
        path: '/home',//path里有/home时，显示组件
        component: Home
    },

    {
        path: '/about',
        component: About
    }
]

在routes里设置路径，并引用组件

注意是component。我多加了一个s，报错都不知道是哪里。。

<div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>

</div>

再在App.vue里用router-link引出这两个组件，to属性写出路径，和routes里面的路径对应。

router-link是路由里注册过的一个标签。最终渲染会渲染成a标签。

为了能让组件内容显示，需要一个router-view标签，决定最后渲染出来的组件是放在什么位置的，

<div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
</div>

模板内的内容要放一个根标签下。不然就报错