VUEJS項目實踐二之複雜單頁應用路由及視圖篇

上回書說到，如何在我心愛的16寸mac pro上快速構建了一個Vuejs項目。
本篇將記錄如何使用VueRouter做出不同路由的複雜單頁應用。

一、準備工作
1、首先我們用idea打開工程，來看看項目的目錄結構

好的，真是一目瞭然，不介紹基礎，趕時間，官網有。

2、我們啓動項目以後，看到的這個初始頁面

它在這個HelloWorld.vue文件裏
打開就會發現，這個vue文件沒有標亮，看起來很不方便，也沒有HTML標籤的自動補全。

可以參考這篇博客
https://blog.csdn.net/tangcc110/article/details/79776268
加一個自動補全設置。

二、正式寫路由
1、首先我們把上面的那個HelloWorld.vue直接刪掉。
在components目錄下，新建三個頁面，分別是FirstPage.vue
、SecondPage.vue以及ThirdPage.vue

最開始寫簡單一點就好，三個頁面就以不同的文字內容區分
（1）FirstPage.vue

<template>
    <div>
        {{msg}}
    </div>
</template>

<style>
    body {
        /*background-color: darkslategray;*/
    }
</style>

<script>
    export default {
        data() {
            return {msg: '大家好！我是第一個頁面'}
        }
    }
</script>

（2）SecondPage.vue

<template>
    <div>
        {{msg}}
    </div>
</template>

<style>
    body {
        /*background-color: green;*/
    }
</style>

<script>
    export default {
        data() {
            return {msg: '大家好！我是第二個頁面'}
        }
    }
</script>

（3）ThirdPage.vue

<template>
    <div>
        {{msg}}
    </div>
</template>

<style>
    body {
        /*background-color: green;*/
    }
</style>

<script>
    export default {
        data() {
            return {msg: '大家好！我是第三個頁面'}
        }
    }
</script>

2、上一步到這裏就該報錯了。
我們把router目錄下的index.js的路由註釋掉

3、我們到main.js裏面來寫一個新的路由

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// import router from './router'
import VueRouter from 'vue-router'

import FirstPage from './components/FirstPage'
import SecondPage from './components/SecondPage'
import ThirdPage from './components/ThirdPage'

Vue.config.productionTip = false


Vue.use(VueRouter)

// 定義路由
let router = new VueRouter({
  linkActiveClass: 'active',
  routes: [
    {
      path: '/',
      redirect: 'FirstPageLink'
    },
    {
      path: '/FirstPageLink',
      component: FirstPage
    },
    {
      path: '/SecondPageLink',
      component: SecondPage
    },
    {
      path: '/ThirdPageLink',
      component: ThirdPage
    }
  ]
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

注意剛纔新建的頁面在這裏要引入。
這個地方寫了一些link，它定義在哪呢？

4、自問自答，在App.vue裏。
App.vue是入口頁面

<template>
  <div id="app">
    <img src="./assets/logo.png">

    <ul>
      <li>
        <router-link to="FirstPageLink">第一個頁面</router-link>
        <router-link to="SecondPageLink">第二個頁面</router-link>
        <router-link to="ThirdPageLink">第三個頁面</router-link>
      </li>
    </ul>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5、最終效果

點擊不同頁面可切換。一個簡單的路由頁面就實現啦！

====================================
我是更新線🧵🧵🧵2020年2月21日

====================================

上回書說到，實現了一個簡單的路由頁面，說完就去睡覺啦！
這次來說，路由頁面裏面加入多個視圖。

現在的目錄結構是這樣滴～

新建了一個vue文件，FirstPageBPart.vue，這個是第一個頁面的第二個視圖部分。原來的FirstPage.vue是第一個頁面的第一個視圖部分。
爲了區分第一個頁面的兩個視圖，每個vue裏分別加入了一張圖片。

1、首先看下兩個vue文件的內容
（1）FirstPage.vue

<template>
    <div>
        {{msg}}
      <div>
        <img src="../../assets/4.png" style="width: 300px;height: 300px">
      </div>
    </div>
</template>

<style>
    body {
        /*background-color: darkslategray;*/
    }
</style>

<script>
    export default {
        data() {
            return {msg: '大家好！我是第一個頁面的第一個視圖'}
        }
    }
</script>

（2）FirstPageBPart.vue

<template>
    <div>
        {{msg}}
      <div>
        <img src="../../assets/5.png" style="width: 300px;height: 300px">
      </div>
    </div>
</template>

<style>
    body {
        /*background-color: black;*/
    }
</style>

<script>
    export default {
        data() {
            return {msg: '我是第一個頁面的第二個視圖'}
        }
    }
</script>

2、然後在App.vue入口頁面中加入一行，FirstPageBPart.vue的link

<router-view name="FirstPageBPartLink">第一個頁面的第二個Part</router-view>

3、在main.js中將FirstPageBPart.vue的link定義到FirstPage
注意需要用到的vue文件需要import過來

好啦，這樣就完成啦！看下效果

去睡覺啦～下次再更～

本文關聯博客：
https://blog.csdn.net/Yolanda_NuoNuo/article/details/104419233

另附代碼github鏈接
本文github完整源碼