v-router学习笔记

码农天地 - 2020-10-03 10:56:58

---

在模块化机制中使用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实例中挂载创建的路由实例导入路由对象，并调用Vue.use(VueRouter)

Vue.use(VueRouter)

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

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

const router = new VueRouter({
 routers
})

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

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

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

Tags 标签