前言
接上文入门(一),一个项目需要正常运行起来,路由肯定是不可或缺的。本文就学习如何配置vue-router,是项目能完整运行起来。在自己研究了一下后,其实使用vue-router很简单。主要就是注意一个点,下文有讲到。
学习资料
webpack 官网:www.webpackjs.com/
vue Router: router.vuejs.org/zh/installa…
安装vue-router
npm install vue-router
初始化
新建文件 src/router/index.js, 用来存放地址;
- 默认路由是hash模式,即路径会带 # 符号,也为了美化路径,我们将路由模式改为 history 模式
// 引入
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
// 设置默认路径页面
{
path: '/',
// 默认路径
redirect: to => {
return '/home'
}
},
{
name: '首页',
path: '/home',
component: resolve => require(['@/pages/home'], resolve), // 路由懒加载,
children: [
{
name: '页面A',
path: '/pageA',
component: resolve => require(['@/pages/pageA'], resolve)
},
{
name: '页面B',
path: '/pageB',
component: resolve => require(['@/pages/pageB'], resolve)
}
]
}
]
export default new VueRouter({
mode: 'history', // 将路由模式切换为history(去除#),需要设置默认路径页面
routes // (缩写) 相当于 routes: routes
})
webpack配置
要注意的是,当把vue-router的模式改为‘history’时,你会发现,跳转页面并刷新当前路由后,页面会报错未找到,这是因为此模式下。vue-router提供的是虚拟路径,需要自己配置默认路劲已显示指定路由
在文件webpack.common.js中添加
devServer: {
historyApiFallback: true
}
此时,刷新当前路由,页面就不会报错未找到了
打包后index.html页面无法显示router-view的问题
但是! 要注意的是,history在webpack打包后的router-view引用的内容会不见,要是想打开打包后的index.html,就需要把 mode: 'history' 注释掉,或者可以根据当前环境判断:
新建开发环境和生产环境的js配置文件在 src/router/index.js中
const routerConfig = process.env.NODE_ENV === 'development' ? require('./dev.js') : require('./prod.js')
export default new VueRouter({
mode: routerConfig.mode,
routes // (缩写) 相当于 routes: routes
})
在src/router/dev.js中
module.exports = ({
mode: 'history' // 开发环境下将路由模式切换为history(去除#),需要设置默认路径页面
})
在src/router/prod.js中
module.exports = ({
mode: '' // 打包时不能是history模式(想显示router-view里内容的话)
})
结语
vue-router引用还是比较简单的,当配置完路由后,项目结构基本已经完善了(至少该有的都有了,做个简单的应用程序还是不成问题的)
本文源码:github.com/SaltedFishH…
依旧共勉!