玩转Vue_Webpack中使用router

安装vue-router

cnpm i vue-router -S

image.png

GoodsList.vue

Account.vue

main.js

// 注意：这里导入的Vue功能不完整，并没有提供像网页中使用那样的全部功能
import Vue from 'vue'
// 导入App组件
import App from './App.vue'
// 1.导入VueRouter包
import VueRouter from 'vue-router'
// 2.手动安装VueRouter
Vue.use(VueRouter)

// 导入组件模块
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'


// 3.创建路由对象
const router = new VueRouter({
    routes : [
        // account goodlist
        {path : '/account',component : account},
        {path : '/goodslist',component : goodslist},
    ]
})

var vm = new Vue({
    el : '#app',
    data : {},
    // 注意：这里不要使用components注册组件，选择使用render函数
    render : c => c(App),
    router,// 4.将router对象赋给vm实例
})

注意：路由路径匹配规则以为着有 router-link和router-view，那么它们在哪里呢？
因为我们使用render函数将App.vue组件渲染进了index.html中的

中，App.vue会覆盖

中写的所有内容，所以我们只需要在App.vue中补写切换组件代码即可
App.vue

运行cnpm run dev查看

webpack实现子路由

准备自组件

image.png

Login.vue

Register.vue

Account.vue

main.js

// 注意：这里导入的Vue功能不完整，并没有提供像网页中使用那样的全部功能
import Vue from 'vue'
// 导入App组件
import App from './App.vue'
// 1.导入VueRouter包
import VueRouter from 'vue-router'
// 2.手动安装VueRouter
Vue.use(VueRouter)

// 导入组件模块
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

// 导入自组件
import login from './subcomponents/Login.vue'
import register from './subcomponents/Register.vue'


// 3.创建路由对象
const router = new VueRouter({
    routes : [
        // account goodlist
        {
            path : '/account',
            component : account,
            children : [
                { path : 'login' , component : login},
                { path : 'register' , component : register},
            ]
        },
        {path : '/goodslist',component : goodslist},
    ]
})

var vm = new Vue({
    el : '#app',
    data : {},
    // 注意：这里不要使用components注册组件，选择使用render函数
    render : c => c(App),
    router,
})

运行cnpm run dev查看

样式style的处理

抽离路由模块

现在在我们的项目中main.js比较庞杂，我们应该把路由部分抽离成单独的js文件

image.png

router.js

import VueRouter from 'vue-router'
// 导入组件模块
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

// 导入自组件
import login from './subcomponents/Login.vue'
import register from './subcomponents/Register.vue'


// 3.创建路由对象
const router = new VueRouter({
    routes : [
        // account goodlist
        {
            path : '/account',
            component : account,
            children : [
                { path : 'login' , component : login},
                { path : 'register' , component : register},
            ]
        },
        {path : '/goodslist',component : goodslist},
    ]
})

export default router // 将router对象暴露出去

main.js

// 注意：这里导入的Vue功能不完整，并没有提供像网页中使用那样的全部功能
import Vue from 'vue'
// 导入App组件
import App from './App.vue'
// 1.导入VueRouter包
import VueRouter from 'vue-router'
// 2.手动安装VueRouter
Vue.use(VueRouter)

// 导入router模块
import router from './router.js'

var vm = new Vue({
    el : '#app',
    data : {},
    // 注意：这里不要使用components注册组件，选择使用render函数
    render : c => c(App),
    router,
})