8. vue 抽离路由模块 router.js

抽离rouerJs.jpg

将vue-router在main.js中的代码抽离，集中到router.js文件统一管理：

- main.js 文件

1.创建 router.js
2.导入路由模块 获得 路由暴露的对象
3.挂载在vm实例上

注意：一定要引入Vue 文件，否则无法解析vue文件

// 1.先引入包
// 2. 创建 vue 实例
import Vue from 'vue/dist/vue';
import app from './App.vue'
import router from './router'
var vm=new Vue({
    el:'#app',
    data() {
        return {
            msg:"OK"
        }
    },
    methods: {
        
    },
    render:c=>c(app),
    //5.挂载路由模块
    router  
})

- router.js 文件

注意：一定要引入Vue 文件，否则无法解析vue文件

1.引入vue-router路由模块
2.手动挂载使用VueRouter
3.导入 父、子 组件
4.创建router实例，配置路由
5.把router对象暴露出去，让main.js引入

// 导入 Vue 解析模块
import Vue from 'vue/dist/vue';
// 1.先导入路由模块
import VueRouter from 'vue-router'
// 2.安装 和使用路由模块
Vue.use(VueRouter)

// 3.导入父组件
import login from './comp/login.vue'
import regist from './comp/regist.vue'

// 导入子组件
import loginSon from './comp/son/loginSon.vue'
import registSon from './comp/son/registSon.vue'


// 4.创建路由模块
const router = new VueRouter({
    routes:[
        //redirect 设置默认显示的组件
        // { path: '/', redirect: '/src/comp/regist' },
        {
            path:'/src/comp/login.vue',
            component:login,
            children:[
                {path:'/src/comp/son/loginSon.vue',component:loginSon},
                {path:'/src/comp/son/registSon.vue',component:registSon},
            ]
        },
        {path:'/src/comp/regist.vue',component:regist}
    ]
})
//暴露路由对象
export default router;