[JavaScript知识库]Vue的router配置

新建一个router文件夹专门存放路由配置
1.main.js

// 配置路由相关信息
import Vue from 'vue';
import App form './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

2.router文件夹下的index.js

import Router from 'vue-router'
import Home from '../components/Home'
import HomeNews from '../components/HomeNews'
import HomeMessage from '../components/HomeMessage'
// const HomeNews = () => import('../components/HomeNews')
// const HomeMessage = () => import('../components/HomeMessage')
// const HomeMessage = resolve => require(['../components/HomeMessage'],resolve)
import About from '../components/About'
import User from '../components/User'
const profile = () => import('../components/profile')

// 通过vue.use(插件),安装插件
Vue.use(Router)
// 创建VueRouter对象
const router = new Router({
  // 配置路由和组件之间的映射关系
  routes: [
    {
      path: '/',
      // 重定向，默认首页
      redirect: '/home'
    },
    {
      path: '/home',
      // name: 'Home',
      component: Home,
    //  路由懒加载第二种方式：
    //   component: () => import('../components/Home')
      children:[
        {
          path:'',
          redirect:'news'
        },
        {
          path:'news',
          //这里的path不用加'/',源码内部会自动拼接上，如果加上'/'会报错
          component:HomeNews
        },{
          path:'message',
          component:HomeMessage
        }
      ],
      meta: {
        title: '首页'
      }
    },  
    {
      path: '/about',
      name: 'About',
      component: About,
      meta: {
        title: '关于'
      }
    },
    {
      path: '/user/:userid',
      name: 'User',
      component: User,
      meta: {
        title: '用户'
      }
    },
    {
      path: '/profile',
      component: profile,
      meta: {
        title: '档案'
      }
    },
  ],
  // 路径拼接，hash，history，abstract
  mode: 'history',
  // 修改所有linkActiveClass的名字为active
  linkActiveClass: 'active'
})

export default router

上面的路由写法不是懒加载
为什么需要懒加载？
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
方法一的写法很复杂，这里就不写了。
方法二
const About = resolve => require([‘…/components/About’],resolve)
方法三
const Home = () => import(‘…/components/Home’)

产品可能提出一个需求，当路由进行跳转的时候，改变页面的title这个时候一个一个地跳转就会很麻烦。
所以我们用到全局导航守卫
前置钩子(回调) 路由跳转之前调用

router.beforeEach((to,from,next) => {
  // 从from跳转到to
  console.log(to);
  console.log("+++++++++");
  document.title = to.matched[0].meta.title
  next()
}) 

后置钩子 路由跳转之后调用
补充一: 如果是后置钩子，也就是afterEach，不需要主动调用next()函数

router.afterEach((to,form) => {
  console.log("--------");
})

解决重复点击路由报错问题

const Push = Router.prototype.push
Router.prototype.push = function push(location) {
  return Push.call(this,location).catch(err => err)
}