結合 webpack 使用 vue-router（七）

結合 webpack 使用 vue-router：

首先安裝路由包vue-router： cnpm install vue-router
使用模塊化工具導入 vue-router 後，必須手動調用 Vue.use() 明確的安裝路由：
導入 vue 包：import Vue from 'vue'；
導入 vue-router 包：import VueRouter from 'vue-router'；
手動安裝 Vue-router ：Vue.use(VueRouter)；
導入 Account 組件
導入 GoodsList 組件
建立路由對象：var router = new VueRouter({ routes:[ accout, goodslist ] });

入口函數 main.js:css

//`1：導入 vue 包
import Vue from 'vue'; //2：導入 vue-router 包
import  VueRouter from 'vue-router'; //3：手動安裝 VueRouter
Vue.use(VueRouter); // 4：導入 Account 組件
import account from './main/Account.vue'; // 5：導入 GoodsList 組件
import goodsList from './main/GoodsList.vue'; import app from './App.vue'; //6：建立 VueRouter 路由對象
var router = new VueRouter({ //Account GoodsList
 routes:[ { path: '/account', component: account}, { path: '/goodsList', component: goodsList}, ] }); var vm = new Vue({ el: "#app", render: c => c(app), //render 會把 el 指定的容器中全部的內容都清空覆蓋，因此不要把路由的 router-view 和 router-link 直接寫到 el 所控制的元素中；
    router //7：將路由對象掛載到 vm 上
}); //App 這個組件是經過 vm 實例的 render 函數渲染出來的， render 函數若是要渲染組件，渲染出來的組件只能放到 el：'#app' 全部指定的元素中； //Account 和 GoodsList 組件是經過路由匹配監聽到的，因此這兩個組件只能展現到屬於路由的 <router-view></router-view> 中去；

建立組件 Account.vue：html

<template>
    <div>
        <h1> 這是 Account 組件 </h1>
    </div>
</template>

<script> export default { name: "account" } </script>

<style scoped>

</style>

建立 GoodsList.vue 組件：vue

<template>
    <div>
        <h1> 這是 GoodsList 組件 </h1>
    </div>
</template>

<script> export default { name: "GoodsList" } </script>

<style scoped>

</style>

建立 App.vue 組件：webpack

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

index.html：web

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--這時容器-->
    <div id="app">

    </div>
</body>
</html>

展現效果：vue-router

建立子組件：

　　1：建立子組件 register.vue:npm

<template>
    <div>
        <h3>這是 Account 的註冊子組件</h3>
    </div>
</template>

<script> export default { name: "register" } </script>

<style scoped>

</style>

View Code

　　2：建立子組件 login.vue：app

<template>
    <div>
        <h3>這是 Account 的登陸子組件</h3>
    </div>
</template>

<script> export default { name: "login" } </script>

<style scoped>

</style>

View Code

　　3：在組件 account.vue 中添加子組件連接和顯示區域：less

<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> export default { name: "account" } </script>

<style scoped>

</style>

View Code

　　4：入口文件 main.js 修改成：ide

//`1：導入 vue 包
import Vue from 'vue'; //2：導入 vue-router 包
import  VueRouter from 'vue-router'; //3：手動安裝 VueRouter
Vue.use(VueRouter); // 4：導入 Account 組件
import account from './main/Account.vue'; // 5：導入 GoodsList 組件
import goodsList from './main/GoodsList.vue'; import app from './App.vue'; //9：導入 account 中的兩個子組件
import login from './subcom/login.vue'; import register from './subcom/register.vue'

//6：建立 VueRouter 對象
var router = new VueRouter({ //Account GoodsList
 routes:[ { path: '/account', component: account, children: [//8：建立 account 的兩個子組件
                { path: 'login', component: login}, { path: 'register', component: register} ] }, { path: '/goodsList', component: goodsList}, ] }); var vm = new Vue({ el: "#app", render: c => c(app), //render 會把 el 指定的容器中全部的內容都清空覆蓋，因此不要把路由的 router-view 和 router-link 直接寫到 el 所控制的元素中；
    router //7：將路由對象掛載到 vm 上
}); //App 這個組件是經過 vm 實例的 render 函數渲染出來的， render 函數若是要渲染組件，渲染出來的組件只能放到 el：'#app' 全部指定的元素中； //Account 和 GoodsList 組件是經過路由匹配監聽到的，因此這兩個組件只能展現到屬於路由的 <router-view></router-view> 中去；

View Code

　　其中添加代碼：

添加子組件後的顯示效果：

注意：組件的 style 樣式表：

　　普通的 style 標籤只支持普通的樣式，若是想要啓用 scss 或者 less，須要爲 style 元素設置 lang 屬性例如：<style lang="scss"></style>
　　只要 style 標籤是在 .vue 組件中定義的，推薦爲 style 標籤開啓 scoped 屬性例如：<style scoped></style>
<style lang="scss" scoped></style>

抽離路由模塊：

入口文件 main.js：

//`1：導入 vue 包
import Vue from 'vue'; import app from './App.vue'; //2：導入 vue-router 包
import  VueRouter from 'vue-router'; //3：手動安裝 VueRouter
Vue.use(VueRouter); //4:導入被抽離的路由模塊
import router from './router.js'; var vm = new Vue({ el: "#app", render: c => c(app), //render 會把 el 指定的容器中全部的內容都清空覆蓋，因此不要把路由的 router-view 和 router-link 直接寫到 el 所控制的元素中；
    router //7：將路由對象掛載到 vm 上
}); //App 這個組件是經過 vm 實例的 render 函數渲染出來的， render 函數若是要渲染組件，渲染出來的組件只能放到 el：'#app' 全部指定的元素中； //Account 和 GoodsList 組件是經過路由匹配監聽到的，因此這兩個組件只能展現到屬於路由的 <router-view></router-view> 中去；

View Code

被抽離出的路由模塊 router.js：

//2：導入 vue-router 包
import  VueRouter from 'vue-router'; // 4：導入 Account 組件
import account from './main/Account.vue'; // 5：導入 GoodsList 組件
import goodsList from './main/GoodsList.vue'; //9：導入 account 中的兩個子組件
import login from './subcom/login.vue'; import register from './subcom/register.vue'

//6：建立 VueRouter 對象
var router = new VueRouter({ //Account GoodsList
 routes:[ { path: '/account', component: account, children: [//8：建立 account 的兩個子組件
                { path: 'login', component: login}, { path: 'register', component: register} ] }, { path: '/goodsList', component: goodsList}, ] }); //將 router 對象暴露出去
export default router;

View Code