vue工程化之路由(router)

路由router

路由router的使用步骤:

  1. ①在src/main.js入口文件中引入相关模块及组件
    vue工程化之路由(router)_第1张图片
    ②在src下新建个router目录,然后在router里面新建个index.js文件
    vue工程化之路由(router)_第2张图片
    ③此时会报错:找不到依赖,可以运行npm install -save ver-router进行安装。
    在这里插入图片描述

  2. 安装vue路由模块vue-router和网络请求模块vue-resource。
    vue工程化之路由(router)_第3张图片

  3. 配置路由选项及渲染App组件(src/main.js入口文件)
    vue工程化之路由(router)_第4张图片

  4. 创建路由,配置路由映射并导出(src/router/index.js)
    方法一:require读取模块
    之前在src下建了个router目录,然后在里面新建个index.js文件,这个文件负责写路由映射并导出,便于管理。
    首先引入路由模块并使用
    vue工程化之路由(router)_第5张图片

  5. ①创建路由实例
    在这里插入图片描述
    ②配置路由映射
    vue工程化之路由(router)_第6张图片
    ③导出路由配置
    在这里插入图片描述
    方法二:import…from…读取模块 在这里插入图片描述
    vue工程化之路由(router)_第7张图片
    路由router-404警告 ①创建路由实例 在这里插入图片描述
    ②配置路由映射
    vue工程化之路由(router)_第8张图片

  6. 设置链接router-link(src/App.vue)
    vue工程化之路由(router)_第9张图片

  7. 设置路由映射组件渲染router-view(src/App.vue)
    vue工程化之路由(router)_第10张图片

你可能感兴趣的:(vue工程化之路由(router))