上一篇文章我们新建了第一个页面，并把页面挂载到’/’根路由上，没什么问题，我们接下来再新建一个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模块化就这样处理好了。
