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
将路由模块化有助于简化开发的冗余度,可以大大提升代码的可读性