webpack进阶【16】: webpack路由的配置

webpack: 路由的配置

注意： 本进阶是在 webpack【15】的基础上进行衍生。

一、创建当前路由的文件

1、把 webpack 进阶 [15] 中的 config 文件夹、src 文件夹、App.vue 文件、main.js 文件、package.json 文件复制到一个新的文件夹中。如下所示：

image.png
2、根据 package.json 下载 node_modules 包

cnpm i

3、下载 vue-router

cnpm i vue-router -D

4、在 src 文件夹下新建 views 文件夹，里面新建 home.vue, login.vue。
login.vue 中写下内容

<template>
    <div>
        这是 login 组件
    </div>
</template>

home.vue 中写下内容

<template>
    <div>
        这是 home组件
    </div>
</template>

5、App.vue 中利用 router-view 进行【路由出口】，意思是说所有的组件都在这里进行视图展示。

image.png
6、整个文件夹路径情况如下

image.png
7、main.js 中引入 vue-router，并进行路由配置

// 使用 App 组件， 渲染 index.html 中的视图
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router' // 引入 vue-router
Vue.use(VueRouter)

import login from './views/login.vue'
import home from './views/home.vue'

const router = new VueRouter({
    routes: [
        { path: '/', redirect: '/home' },       // 重定向到 home 组件
        { path: '/login', component: login},    // login 组件
        { path: '/home', component: home },     // home 组件
    ]
})

new Vue ({
    el: '#app',
    router,
    // 作用： 使用App组件， 作为根组件，将来渲染视图
    // render: h => h(App) 
    // 同下面的写法一样的意思
    render: function(createElement) {
        return createElement(App)
    },
})

8、执行本地开发脚本

cnpm run dev

9、这时候会发现浏览器自动我们打开 index.html ,并且当前是在 home.vue 组件的页面。

image.png
10、通过 vue-router ，我们可以利用 webpack 来帮助我们搭建 vue-cli 最基本脚本环境，但是我们把 router组件都写在了 main.js 中，这样不够清晰，我们可以把 router组件单独放在一个文件里。见二操作。

二、创建 router 组件单独一个文件

1、在上面的文件夹 src 根路径下，创建一个 router 文件夹，里面创建 index.js, 把 main.js 中以下的内容复制到 index.js 中, 并用 export default 导出 index.js 中的内容

// index.js
import Vue from 'vue'
import VueRouter from 'vue-router' // 引入 vue-router
Vue.use(VueRouter)
// login 和 home 引用路径需要更改为如下所示
import login from '../views/login.vue'
import home from '../views/home.vue'

const router = new VueRouter({
    routes: [
        { path: '/', redirect: '/home' },       // 重定向到 home 组件
        { path: '/login', component: login},    // login 组件
        { path: '/home', component: home },     // home 组件
    ]
})
export default router

2、main.js 中引入 router


// 使用 App 组件， 渲染 index.html 中的视图
import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入 router


new Vue ({
    el: '#app',
    router,
    // 作用： 使用App组件， 作为根组件，将来渲染视图
    // render: h => h(App) 
    // 同下面的写法一样的意思
    render: function(createElement) {
        return createElement(App)
    },
})

3、main.js 中挂载到 #app 也可以如下写法，除了用 el："#app"，也可以用 $mount('#app')


// 使用 App 组件， 渲染 index.html 中的视图
import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入 router


new Vue ({
    router,
    // 作用： 使用App组件， 作为根组件，将来渲染视图 
    render: h => h(App) 
    // 同下面的写法一样的意思
    // render: function(createElement) {
    //     return createElement(App)
    // },
}).$mount('#app')

4、这样分离现 router 也是可以成立的，保存好，此时我们发现页面也是定向在 home.vue 组件里。

image.png