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

前言

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

快速搭建vue-cli環境

如何搭建基於vue-cli項目，這裏再也不敘述，若是不會的夥伴能夠本身百度。
項目搭建完成後，基本文件目錄以下：

打開咱們剛剛建立的my-project文件夾，這裏對文件夾下的一些文件作簡要說明：

實現具體流程

1. 新建三個單組件文件，main.vue，person.vue，user.vue ,效果圖以下：
   

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標籤，具體代碼以下：
   

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文件丟到服務器便可。

後綴

若是你以爲上面的案列對你有做用，歡迎轉載，但願能註明出處。同時你也能夠在GitHub或知乎上與我一塊兒進階前端學習。

找到我： GitHub
找到我：知乎