vue 全家桶（五）vue-router的使用

没有去过官网的童鞋看过来:https://router.vuejs.org/zh/ ，本文主要写构建的配置以及懒加载的处理。

1.安装

一般来说，在我们生成项目的时候，已经将vue-router依赖加载进来。如果没有，也可以npm安装的。

npm install vue-router

 或者使用全局的 script 标签，则不用手动安装了。

最后，如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能。 

2.在router文件下index.js进行如下配置：

import Vue from 'vue';
import Router from 'vue-router';
 
Vue.use(Router);
 

//定义一个路由
export default new Router({
 
 //当路由跳转的时候，默认滚动到(0,0)位置,即页面开始位置
 scrollBehavior (to, from, savedPosition) { 
  return { x: 0, y: 0 }
 },
 
 routes: [
  {
   path:'/',
   redirect:'/home'  //重定向
  },
  {
      path: "/home",
      name: 'home',
      component: resolve => import('@/pages/home/home') //懒加载 在路由被执行的时候，才引入对应的组件
   },
    {
      path: "/user/:id", //传参
      name: 'user',
      component: resolve => import('@/pages/user/user')
   },
   {
      path: "/catagory",
      name: 'catagory',
      component: resolve => import('@/pages/catagory/catagory'),
      alias:'/cat', //别名
      meta:{
        keepAlive:true //需要被缓存的组件
      }
   }
 ]
})

3.注入根示例

  main.js

import Vue from 'vue';
import App from './App';
import router from './router'; //注意不要大些

new Vue({
  el: '#app',
  router, //注入到根实例中
  components: {App},
  template: '<App/>'
})