webpack+vue学习二:配合vue-router实现路由跳转

2,410 阅读2分钟

前言

接上文入门(一),一个项目需要正常运行起来,路由肯定是不可或缺的。本文就学习如何配置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…
依旧共勉!