关于vue-router:vrouter学习笔记

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

一. 用脚手架构建我的项目(v-cli版本在3.x及以上)

vue create 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)

1. 创立路由实例，并且传入路由映射配置

// 创立VueRouter对象
const routers = [];

const router = new VueRouter({
 routers
})

1. 在Vue实例中挂载创立的路由实例

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

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