vue (router)路由分离

main.js中的内容:

import Vue from 'vue'
import VueRouter from 'vue-router'
import routers from './routers'//和src同级

import App from './App'

Vue.use(VueRouter)
// 把routers.js中的路由在Main.js中实例化
const router = new VueRouter({
  mode: 'history',
  routes: routers
})

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

在同级目录下建一个routers.js

// 路由分离出来
//import shopCart from './components/shopCart.vue'
import fatherComponent from './components/fatherComponent.vue'
const routers = [
    {
        path: '/shopCart',
        name: 'shopCart',
        //懒加载方式,上面的路径可以不需要引入
        component: ()=>import('@/components/shopCart.vue')
    },
    {
        path: "*", // 重定向的组件
        redirect: "/shopCart"
    },
    {
        path: '/fatherComponent',
        name: 'fatherComponent',
        component: fatherComponent
    }
    
]
export default routers

export default routers 为导出整个模块在main.js中引用

app.vue

<template>
  <div id="app">
    <!-- <AddBlog/> -->
    <router-view></router-view>
  </div>
</template>

<script>
// import AddBlog from './components/AddBlog'

export default {
  name: 'App',
  components: {
    // AddBlog
  }
}
</script>

<style>

</style>