2019-07-05Vue之Webpack中使用router

安装vue-router

cnpm i vue-router -S

image.png

GoodsList.vue

<template>
    <div>
        <h1>这是 GoodsList 组件</h1>
    </div>
</template>

Account.vue

<template>
    <div>
        <h1>这是 Account 组件</h1>
    </div>
</template>

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中的<div id="app"></div>中，App.vue会覆盖<div id="app"></div>中写的所有内容，所以我们只需要在App.vue中补写切换组件代码即可
App.vue

<template>
    <div>
        <h1>这是 App 组件</h1>
        <router-link to="/account">account组件</router-link>
        <router-link to="/goodslist">account组件</router-link>

        <router-view></router-view>
    </div>
</template>

<script>

</script>

<style>
    
</style>

运行cnpm run dev查看

webpack实现子路由

准备自组件

image.png

Login.vue

<template>
    <div>
        <h3>这是 Account -- 登录 子组件</h3>
    </div>
</template>

Register.vue

<template>
    <div>
        <h3>这是 Account -- 注册 子组件</h3>
    </div>
</template>

Account.vue

<template>
    <div>
        <h1>这是 Account 组件</h1>
        <router-link to="/account/login">登录</router-link>
        <router-link to="/account/register">注册</router-link>

        <router-view></router-view>
    </div>
</template>

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的处理

<template>
    <div>
        <h3>这是 Account -- 登录 子组件</h3>
    </div>
</template>

<style scoped lang="sass"> /* scoped的意思是 样式 只作用于当前组件，lang的意思是语言，因为除了css还有sass等语法 */
    div{
        color:red;
    }
</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,
})