一.Vue实战项目案例（路由配置+待完）

（1）router.js路由配置文件

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

// import 编译前加载
import Home from '../pages/Home';

// import Column from '../pages/Column';
// let Column = () => {return import(组件)}
// let Column = () => import(组件)

let Column = () => import(/* webpackChunkName: "column" */'../pages/Column.vue')
// import Follow from '@/pages/Follow';//别名 @ -> src    ~  -> public
let Follow = () => import('@/pages/Follow')
import User from '../pages/User';
// import Login from '../pages/Login';
import Reg from '../pages/Reg';
import Detail from '../pages/Detail';
import ShopCar from '../pages/ShopCar';
import ErrorPage from '../pages/ErrorPage.vue';

//webpack识别：2种动态加载组件的方法
  //import(组件).then(结果)
  //require(组件)

let routes = [
  { path: '/home', component: Home },
  { path: '/follow', component: Follow },
  { path: '/Column', component: Column },
  { path: '/User', component: User },
  // { path: '/login', component: Login },
  { path: '/login', component: r=>require(['../pages/Login.vue'],r) },
  { path: '/reg', component: Reg },
  { path: '/shopcart', component: ShopCar },
  // {path:'/detail/:id',component:Detail,props:true},
  { 
    path: '/detail/:id', 
    component: Detail, 
    props: (route)=>({id:route.params.id, dataName:route.query.dataName})//$route==route
  },

  { path: '/', redirect: '/home' },
  { path: '*', component: ErrorPage }
];

export default new VueRouter({
  mode: 'hash',
  routes: routes,
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    return {x:0,y:0}
  }
});

（2）main.js文件：是全局配置。