Vue项目初构之路由优化

上一篇文章我们新建了第一个页面，并把页面挂载到’/’根路由上，没什么问题，我们接下来再新建一个home页面，一般app是先跳转到login页面，点击登录按钮，跳转到home页。我们来模拟一下。
首先我们先新建一个页面，home.vue，他的目录结构为views/home/Home.vue.

  <div class="wrapper">
    home页面
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
    }
  },
  watch: {},
  computed: {},
  methods: {},
  created () {},
  mounted () {}
}
</script>
<style lang="scss" scoped>
.wrapper{
  font-size: 16px;
}
</style>

对应的我们在router/index.js文件里面，写出home.vue对应的路由。

import VueRouter from 'vue-router'
import Login from '../views/login/Login.vue'
import Home from '../views/home/Home.vue'

Vue.use(VueRouter)

const routes = [
{
  path: '/',
  name: 'Login',
  component: Login
}, {
  path: '/home',
  name: 'Home',
  component: Home
}
]

const router = new VueRouter({
routes
})

export default router

接下来我们在登录页面新增一个登录按钮。跳转到home页面。

  <div class="wrapper">
    login 页面
    <div class="loginBtn" @click="login">登录按钮</div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  components: {},
  props: {},
  data () {
    return {
    }
  },
  watch: {},
  computed: {},
  methods: {
    login () {
      this.$router.push({ path: '/home' })
    }
  },
  created () {},
  mounted () {}
}
</script>
<style lang="scss" scoped>
.wrapper{
  font-size: 16px;
  .loginBtn{
    height: 100px;
    width: 200px;
  }
}
</style>

路由跳转我们用this.router.push 所有页面都会调用，应该单独封装成一个js，抽出来方便调用。

我们先来整改第一点，把路由模块化并且实现自动化引入。很简单把 login和home 分成两个模块。如下图：

image.png

home.js

  name: 'home',
  path: '/home',
  meta: {
    isNeedLogin: true,
    title: '首页'
  },
  component: () => {
    return import(
      '@/views/home/Home.vue'
    )
  }
}]
export default home

login.js

  name: 'login',
  path: '/',
  meta: {
    isNeedLogin: false,
    title: '登录'
  },
  component: () => {
    return import(
      '@/views/login/Login.vue'
    )
  }
}]
export default login

然后我们会在router的index.js文件里对文件进行遍历

import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 自动引入所有的模块
const modules = require.context('./modules', false, /.js$/)
const routes = modules.keys().reduce((result, fileName) => {
  result = [...result, ...modules(fileName).default]
  return result
}, [])

const router = new VueRouter({
  routes
})

export default router

运行项目 可以运行
其实

const routes = modules.keys().reduce((result, fileName) => {
  result = [...result, ...modules(fileName).default]
  return result
}, [])

这一段代码和下面一段代码是一样的效果

{
  path: '/',
  name: 'Login',
  component: Login
}, {
  path: '/home',
  name: 'Home',
  component: Home
}]```
只不过第一段代码是 根据文件目录，把对应js下的路由遍历出来，动态添加到router中去的。
router模块化就这样处理好了。