Vue学习笔记——Vue-router

 

第1节：Vue-router入门

1、解读router/index.js文件

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件

Vue.use(Router)  //Vue全局使用Router

export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    }
  ]
})

 

2、地址栏输入  http://localhost:8080/#/hi 出现一个新的页面，先来看一下我们希望得到的效果

        

• 在src/components目录下，新建 Hi.vue 文件。

• 编写文件内容，和我们之前讲过的一样，文件要包括三个部分