关于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 老师的学习视频