基於vue-cli構建vue-router的入門級demo

pubdreamcc發表於2019-03-18
Vue

前言

本案列僅針對剛剛入門vue學習的夥伴，博主也是剛剛在學基於vue-cli搭建腳手架專案，對於前端大牛，可以移步。

快速搭建vue-cli環境

如何搭建基於vue-cli專案，這裡不再敘述，如果不會的夥伴可以自己百度。
專案搭建完成後，基本檔案目錄如下：
基於vue-cli構建vue-router的入門級demo
開啟我們剛剛建立的my-project資料夾，這裡對資料夾下的一些檔案做簡要說明：
基於vue-cli構建vue-router的入門級demo

實現具體流程

  1. 新建三個單元件檔案，main.vue，person.vue，user.vue ,效果圖如下：
    基於vue-cli構建vue-router的入門級demo

  2. main.vue檔案中程式碼如下：
<template>
  <div id="main">
    <h1>首頁</h1>
    <p>這裡是首頁，可以放置一些公司的相關資訊，簡介等資料</p>
  </div>
</template>
<script>
export default {
  name: 'Main',
  data () {
    return {}
  }
}
</script>
<style>
  #main {
    color: red;
  }
  #main p {
    background: #bbffaa;
  }
</style>

這裡是首頁元件的相關內容，一個元件檔案有三部分組成（template+script+css），可以簡單理解成一個網頁的三要素：html+css+javascript

  1. user.vue 檔案中相關程式碼：
<template>
  <div id="user">
    <h1>個人資訊</h1>
    <p>姓名:{{userName}}</p>
    <p>年齡：{{age}}</p>
  </div>
</template>
<script>
export default {
  name: 'User',
  data () {
    return {
      userName: 'dream.cc',
      age: 24
    }
  }
}
</script>
<style>
#user {
  color: blue
}
#user p{
  background: deeppink;
}
</style>
  1. person.vue 檔案中相關程式碼如下：
<template>
  <div id="person">
    <h1>個人中心</h1>
    <p>這裡是個人中心，歡迎訪問個人相關資訊</p>
    <router-link to="/person/user">使用者資訊</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'Person',
  data () {
    return { }
  }
}
</script>
<style>
  #person {
    color: greenyellow;
  }
  #person p {
    background: pink;
  }
</style>

這裡利用了巢狀路由，user元件在person元件的內部渲染，user是person的子路由。一個基本路由實現需要兩個標籤，router-link（預設渲染成a標籤）和router-view（路由渲染的容器，指定將來路由元件渲染的位置）

  1. 配置router檔案下的index.js，路由的匹配規則
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../components/Main.vue'
import Person from '../components/Person.vue'
import User from '../components/User.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/main',
      name: 'Main',
      component: Main
    },
    {
      path: '/person',
      name: 'Person',
      component: Person,
      children: [
        {
          path: 'user',
          name: 'User',
          component: User
        }
      ]
    }
  ]
})

每一個路由對應一個元件，path屬性提供路由地址，component屬性提供匹配地址所對應的元件，這裡需要注意component屬性後面是一個我們事先定義的三個元件模板物件，所以這裡先必須匯入三個元件檔案

  1. App主元件掛載router-link和router-view標籤，具體程式碼如下：
    基於vue-cli構建vue-router的入門級demo

  2. 設定main.js 檔案。 匯入router下的index.js ,在vue例項下掛載router屬性。
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

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

以上程式碼儲存後，終端可執行npm run dev開啟本地伺服器檢視我們程式碼 。如需打包可執行npm run build ，專案釋出時只需把dist檔案丟到伺服器即可。
基於vue-cli構建vue-router的入門級demo

字尾

如果你覺得上面的案列對你有作用，歡迎轉載，希望能註明出處。同時你也可以在GitHub或知乎上與我一起進階前端學習。

找到我： GitHub
找到我：知乎

相關文章