H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】v-router学习笔记

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

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

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

创建项目时需要输入的信息详解:
无标题.png

初始化项目后的样子
image.png

二. 在项目中使用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老师的学习视频

本文地址:H5W3 » 【前端技术】v-router学习笔记

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址