v-router学习笔记

在模块化机制中使用v-router

一. 用脚手架构建项目(v-cli版本2.x)

vue init webpack myvuejsproject
//myvuejsproject为项目名称

创建项目时需要输入的信息详解：

初始化项目后的样子

二. 在项目中使用v-router

(用脚手架构建初始化项目完后其实项目中已经配好的v-router，但为了熟练v-router的使用我们自己手动配置使用v-router)

步骤：先在router文件夹中的index.js中导入路由对象，调用Vue.use(VueRouter)，再创建路由实例，并传入路由映射然后再main.js中的Vue实例中挂载创建的路由实例

1. 导入路由对象，并调用Vue.use(VueRouter)

   Vue.use(VueRouter)

2. 创建路由实例，并且传入路由映射配置

   // 创建VueRouter对象
   const routers = [];
   
   const router = new VueRouter({
             routers
   })

3. 在Vue实例中挂载创建的路由实例

   import router from './router/index';
   new Vue({
                                           el: '#app',
                                           router,//挂载创建的路由实例
                                           components: {
                                           App
             },
             template: '<App/>'
   })

图片来源于codewhy老师的学习视频