Vue结合webpack使用vue-router 显示组件及子组件

一、先安装vue-router模块

npm i vue-router -S

二、导入vue-router包

import VueRouter from 'vue-router'

三、手动安装VueRouter

Vue.use(VueRouter)

四、创建路由对象

var router = new VueRouter({

    routes: [

        {   

            path:'/account',

            component:accout,

            children: [

                {path: 'child1',component: child1},

                {path: 'child2',component: child2}

            ]

        },

        {path:'/goodsList',component:goodsList},

    ]

})

五、将路由对象挂载到vm上

var vm = new Vue({

    el: "#app",

    data: {

        msg: '123'

    },

    render: c => c(login),

    //将路由对象挂载到vm上

    router

})

代码如下：

 

import Vue from 'vue'

//webpack无法打包 .vue的文件，需要安装相关的loader
// npm i vue-loader vue-template-compiler -D
import login  from './js/login.vue'

// 1、导入vue-router包
import VueRouter from 'vue-router'
//2、手动安装VueRouter
Vue.use(VueRouter)

import Name,{aa,bb}  from './test.js'

import accout from './main/Account.vue'
import goodsList from './main/GoodsList.vue'

import child1 from './children/child1.vue'
import child2 from './children/child2.vue'

//3、创建路由对象
var router = new VueRouter({
    routes: [
        {   
            path:'/account',
            component:accout,
            children: [
                {path: 'child1',component: child1},
                {path: 'child2',component: child2}
            ]
        },
        {path:'/goodsList',component:goodsList},
    ]
})

var vm = new Vue({
    el: "#app",
    data: {
        msg: '123'
    },
    render: c => c(login),
    // 4、将路由对象挂载到vm上
    router
})

console.log(Name)
console.log(aa)
console.log(bb)