Vue学习26----路由模块化

以前路由的配置文件都写在了main.js中，显得很乱，
现在把路由封装成一个模块，在mian.js中引用就可以了

把
https://blog.csdn.net/zhaihaohao1/article/details/89051936
中的路由封装成模块

项目结构如下：

router.js 中封装的路由模块

import Vue from 'vue';

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


import Home from '../components/Home.vue';
import News from '../components/News.vue';


const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },

  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

//5 <router-view></router-view> 放在 App.vue

//暴露出去
export default router;

main.js中引用

// https://router.vuejs.org/zh/
//
// vue路由配置：
// 1.安装
// npm install vue-router  --save   / cnpm install vue-router  --save
//
// 2、在main.js中，引入并 Vue.use(VueRouter)
// import VueRouter from 'vue-router'
// Vue.use(VueRouter)
//
// 3、在main.js中，配置路由
// 3.1、创建组件 引入组件
// import Home from './components/Home.vue';
// import News from './components/News.vue';
// 3.2、定义路由  （建议复制s）
// const routes = [
//   { path: '/foo', component: Foo },
//   { path: '/bar', component: Bar },
//   { path: '*', redirect: '/home' }   /*默认跳转路由*/
// ]
//
// 3、在main.js中，实例化VueRouter
// const router = new VueRouter({
//   routes // （缩写）相当于 routes: routes
// })
//
// 4、在main.js中，挂载
//
// new Vue({
//   el: '#app',
//   router，
//   render: h => h(App)
// })
//
// 5 、在App.vue中，根组件的模板里面放上这句话
// <router-view></router-view>
//
//
// 6、在App.vue中，路由跳转
// <router-link to="/foo">Go to Foo</router-link>
// <router-link to="/bar">Go to Bar</router-link>



import Vue from 'vue';
import App from './App.vue';

//引入路由的配置
import  router from './router/router.js';


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

源码下载：vuedemo17

https://download.csdn.net/download/zhaihaohao1/11112029