vue.js学习笔记三十——webpack使用vue-router

1. 安装vue-router环境

npm i vue-router

2. 使用vue-router

2.1 导包

import Vue from 'vue';

import VueRooter from 'vue-router';

2.2 调用

如果在一个模块化工程中使用它，必须通过Vue.use()明确的安装路由功能：

Vue.use(VueRooter );

注意：如果使用全局的script标签，则无需手动安装。

2.3 创建VueRouter对象

路由对象有两个参数，一个是path，一个是component，所以我们需要先导入组件

// 导入组件
import account from './main/Account.vue';
import goodlist from './main/GoodsList.vue';

var router = new VueRooter({
    routes:[
        {path:'/account',component:account},
        {path:'/goodslist',component:goodlist}
    ]
});

2.4 将路由对象挂载到VM实例上

var vm = new Vue({
    el:'#app',
    render:c => c(app),
    router    // 将路由对象挂载到VM对象上
});

2.5 在app.vue组件中，定义路由信息

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

        <router-link to="/account">Account</router-link>
        <router-link to="/goodslist">goodslist</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
</script>

<style>
</style>

运行：

注意：APP这个组件，是通过VM实例的render函数渲染出来的，render函数如果要渲染组件，渲染出来的组件，只能放到el: '#app' 所指定的元素中。

Account与GoodsList组件，是通过路由匹配监听到的，所以，这两个组件，只能展示到属于路由的<router-view></router-view>中去。

3. 结合webpack实现children子路由

3.1 定义子组件

1. login.vue

<template>
    <div>
        <h1>这个是account的子组件登录组件</h1>
    </div>
</template>

<script>

</script>
<style>

</style>

2. register.vue

<template>
    <div>
        <h1>这个是account的子组件注册组件</h1>
        <div>
            <table>
                <tr>
                    <td>姓名：</td>
                    <td><input type="text" name="username"/></td>
                </tr>
                <tr>
                    <td>账号：</td>
                    <td><input type="text" name="account"/></td>
                </tr>
                <tr>
                    <td>取消</td>
                    <td>注册</td>
                </tr>
            </table>
        </div>
    </div>
    
    
</template>

<script>

</script>
<style>

</style>

3.2 在main.js中导入login与register组件

// 导入子组件
import login from './sub/login.vue';
import register from './sub/register.vue';

 

3.3 在main.js文件中配置子路由children属性

var router = new VueRooter({
    routes:[
        {
            path:'/account',
            component:account,
            children:[
                { path:'login',component:login },
                { path:'register',component:register },
            ]
        },
        {path:'/goodslist',component:goodlist}
    ]
});

3.4 在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>

<script>
</script>

<style>
</style>

运行结果如图：

4. 抽离路由模块

通过上面的案例，我们发现，才定义了四个组件，在main.js中引入了大量的代码，较大的影响了代码的美观度，我们可以将路由部分抽离到router.js文件中

4.1 抽出路由模块到router.js

4.1.1 将创建VueRouter对象抽离

var router = new VueRooter({
    routes:[
        {
            path:'/account',
            component:account,
            children:[
                { path:'login',component:login },
                { path:'register',component:register },
            ]
        },
        {path:'/goodslist',component:goodlist}
    ]
});

4.1.2 将依赖的组件抽离

// 导入组件
import account from './main/Account.vue';
import goodlist from './main/GoodsList.vue';

// 导入子组件
import login from './sub/login.vue';
import register from './sub/register.vue';

4.1.3 导入vue-router

因为我们需要创建VueRooter对象，所以需要导入vue-router

4.1.4 向外暴露router对象

export default router;

完整的router.js

// 1. 导入vue-router  因为后面需要创建VueRooter对象所以需要导入 VueRooter
import VueRooter from 'vue-router';

// 导入组件
import account from './main/Account.vue';
import goodlist from './main/GoodsList.vue';

// 导入子组件
import login from './sub/login.vue';
import register from './sub/register.vue';

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

// 向外暴露路由对象
export default router;

4.2 在main.js中导入router

import router from './router.js';