项目vue-router的构建

基于vue/cli3.0+脚手架搭建Vue项目(02)

---

---

前言

上一篇文章介绍了创建Vue项目过程，接下来则是准备用几个篇章来初始化项目

---

一、vue-router简介

要基于 Vue 框架构建单页面应用，Vue Router是不可或缺的前端依赖库， Vue 官方提供的前端页面路由管理器

二、vue-router的构建

1.安装前端依赖

命令行运行npm install vue-router
package.json文件里便添加了vue-router的记录

tip: 如果运行出现如下错误: 说明vue-router版本不适配， 可以自行选择降低版本npm install vue-router@3.2.0

2.创建router文件

在src目录下新建router文件夹，并在router目录下新建index.js文件

index.js里面添加代码–创建路由对象

import Vue from "vue";
import VueRouter from "vue-router";
import routers from "./importModel";

Vue.use(VueRouter);
const router = new VueRouter({
  routes: routers,
});
export default router;

那么每个模块的路由代码又是如何载入路由实例的呢？这里我们添加了一个importModel.js文件，用来

自动加载js模块

代码内容如下：

// 自动加载js模块
const files = require.context("./", true, /\index.js$/);
let configRouters = [];
files.keys().forEach((key) => {
  if (key === './index.js') return
  configRouters = configRouters.concat(files(key).default);
});
export default configRouters;

在main.js里挂载路由对象

import Vue from 'vue'
import App from './App.vue'
import router from "./router/index.js";

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3.验证路由

我们可以先在router文件夹下新建一个demo的文件夹，里面添加index.js路由文件

index.js内容如下：

const demo = [
  {
    name: "index",
    path: "/index",
    component: () => import("./../../views/demo"),
  },
];
export default demo;

因为引用到了vue实例文件，所以我们在src目录下新建views文件夹存放ui代码（/views/demo/index.vue）


既然有了自己的页面，我们可以删除一下app.vue文件里不用的代码了，最后内容如下：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

初始启动项目为空白页，接下来我们手动跳转到demo页面

总结

好多东西都没了，就像是遗失在风中的烟花，让我来不及说声再见就已经消逝不见。–《男人四十》