Vue路由的模块化

main.js


import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
import router from './router/router'
/* 引入公共的sCss */
import './assets/css/basic.scss'
Vue.use(VueResource)

new Vue({
  el: '#app',
  // 将路由实例挂载到vue实例上
  router,
  render: h => h(App)
})

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '../components/Home'
import News from '../components/News'
Vue.use(VueRouter)

/*定义路由 */
const routes = [
                { path: '/', component: Home },
                { path: '/Home', component: Home },
                { path: '/News', component: News ,name:'news'}
               
              ]
  // 实例化路由
  const router = new VueRouter({
    mode:'history',/* 将默认的hash模式改变成history模式 */
    routes // （缩写）相当于 routes: routes
  })
  export default router

将路由模块化有助于简化开发的冗余度，可以大大提升代码的可读性