vue-cli 2.9.6 環境路由

Posted on Edited on In Views: Disqus:

 

承 vue-cli 2.9.6 初始專案的檔案結構，

為方便清楚標示，所以我調整了部份名稱

 

此範例重點在於下列五個檔案

1、index.html：用途為用來給 Vue 製做實體的根元素。

2、cc0.vue：父元件，定義了路由的出口(<router-view>)。

3、HelloWorld.vue：子元件。

4、router/index.js：用途是定義了元件路由的走向。

5、main.js：用途為，使用了路由參數，指定可用的哪些元件(父元件)，使用元件(父元件)。

 

index.html 的內容為

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>my-project</title>
  </head>
  <body>
    <div id="aaa"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 

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 cc0 from './ccc'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#aaa',
  router,//使用了路由參數
  components: { cc0 },//指定要使用哪個元件(父元件)
  template: '<cc0/>'//使用元件(父元件)
})

當在做 webpack 轉譯時，所產生的 index.html 檔案將會引入 main.js。

ccc.vue 是父元件，元件名稱則自訂為 cc0。

 

ccc.vue 的內容為

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

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

由內容可知父元件裡面定義了路由組件渲染的出口

 

再來看 router/index.js 裡面的內容為

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

路由裡面指定了什麼路徑要導向什麼元件(子元件)。

「@」是「src」的別名，這不是固定用法，而是 webpack.base.conf.js 的設定值

 

HelloWorld.vue 的內容為

<template>
...
</template>

<script>
export default {
  name: 'zzz',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

 

我們在開 vue-devtools 時，可以看到父子元件的階層

 

參考資料：

Vue筆記之render函數(一):render:h=>h(App)