vue——46-webpack打包vue-路由、嵌套路由、样式设置、独立路由 router.js

关于 webpack 打包教程请看：webpack 打包文件

一、路由

main.js 中

1.引入 vue-router 包

安装命名：cnpm i vue-router -S

import Vue from 'vue';
import app from './app.vue';

import VueRouter from 'vue-router';

2.手动安装 VueRouter

Vue.use(VueRouter);

3.导入组件

import account from './main/Account.vue';
import goodslist from './main/GoodsList.vue';

Account.vue 和 GoodsList.vue 组件内容（注：这两个是新建的 .vue 模板文件）

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

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

4.创建路由对象

let router = new VueRouter({
    routes: [
        {path: '/account', component: account},
        {path: '/goodslist', component: goodslist},
        {path: '/', direction: goodslist}
    ]
});

5.将路由对象挂载到 vm 上

let vm = new Vue({
    el: '#app',
    render: c => c(app),
    // 注意： render 会把 el 指定的容器所有内容都覆盖，所以不要把路由中的
    // router-view 和 router-link 直接写到 el 所控制的元素中，而是写进 render
    // 所引模块中去

    // 5.将路由对象挂载到 vm 上
    router
});

app.vue 中

6.引入路由组件

<template>
    <div>
        <h1>这是 App 组件！</h1>
        <!-- 6.引入路由组件 -->
        <router-link to="/account">Account</router-link>
        <router-link to="/goodslist">GoodsList</router-link>

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

二、嵌套路由

main.js 中

7.导入 Account 的两个嵌套子组件

import login from './subcom/login.vue';
import register from './subcom/register.vue';

login.vue 和 register.vue 组件内容（注：这两个是新建的 .vue 模板文件）

<template>
    <div>
        <h3>这是 Login 嵌套组件！</h3>
    </div>
</template>

<template>
    <div>
        <h3>这是 Register 嵌套组件！</h3>
    </div>
</template>

8.创建嵌套子路由对象

let router = new VueRouter({
    routes: [
        {
            path: '/account',
            component: account,
            
            // 嵌套子路由对象
            children: [
                {path: 'login', component: login},
                {path: 'register', component: register},
                {path: '/', component: register}
            ]
            
        },
        {path: '/goodslist', component: goodslist},
        {path: '/', direction: goodslist}
    ]
});

Account.vue 中

9.引入嵌套子路由组件

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

三、样式设置

在每个组件的样式块可以定义全局样式和组件内部样式

scoped 是利用给当前模板 div 添加 属性选择器 来区分各个模板组件

login.vue 内部

<style scoped>
    /* 注意：不加上面的scoped，所设置的样式会显示为全局样式，设置了，
    则只是用于当前的组件 */
    /* 推荐：只要咱们的 style 标签，是在 .vue 组件中定义的，那么，
    推荐都为 style 开启 scoped 属性 */
    div {
        color: blue;
    }
</style>

register.vue 内部

<style lang="scss" scoped>
    /* 注意：普通的 style 标签支持普通的样式设置，
    如果想要启用 scss 或 less，需要为style 元素，设置 lang 属性 */
    body {
        div {
            color: red;
        }
    }
</style>

四、独立路由 router.js

新建 router.js ，把所有路由模块导进去，后期方便管理

// 引入 vue-router 包
import VueRouter from 'vue-router';

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

// 导入 Account 的两个子组件
import login from './subcom/login.vue';
import register from './subcom/register.vue';

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

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

main.js 中

import Vue from 'vue';
import app from './app.vue';

// 引入 vue-router 包
import VueRouter from 'vue-router';

// 手动安装 VueRouter
Vue.use(VueRouter);

// 导入自定义路由模块
import router from './router.js';

let vm = new Vue({
    el: '#app',
    render: c => c(app),
    router
});