vue實踐02之vue-router

本文主要參考技術胖老師的視頻教程。

簡介

因爲Vue在開發時對路由支持的不足，後來官方補充了vue-router插件，它在Vue的生態環境中很是重要，在實際開發中只要編寫一個頁面就會操做vue-router。要學習vue-router就要先知道這裏的路由是什麼？這裏的路由並非指咱們平時所說的硬件路由器，這裏的路由就是SPA（單頁應用）的路徑管理器。再通俗的說，vue-router就是咱們WebApp的連接路徑管理系統。
有的小夥伴會有疑慮，爲何咱們不能像原來同樣直接用<a></a>標籤編寫連接哪？由於咱們用Vue做的都是單頁應用，就至關於只有一個主的index.html頁面，因此你寫的<a></a>標籤是不起做用的，你必須使用vue-router來進行管理。

解讀router/index.js文件

咱們用vue-cli生產了咱們的項目結構，你能夠在src/router/index.js文件，這個文件就是路由的核心文件，咱們先解讀一下它。

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目錄下的Hello.vue組件
 
Vue.use(Router)  //Vue全局使用Router
 
export default new Router({
  routes: [              //配置路由，這裏是個數組
    {                    //每個連接都是一個對象
      path: '/',         //連接路徑
      name: 'Hello',     //路由名稱，
      component: Hello   //對應的組件模板
    }
  ]
})
複製代碼

增長一個Hi的路由和頁面

對路由的核心文件熟悉後，咱們試着增長一個路由配置，咱們但願在地址欄輸入 http://localhost:8080/#/hi 的時候出現一個新的頁面，先來看一下咱們但願獲得的效果。
具體操做步驟以下：

• 在src/components目錄下，新建 Hi.vue 文件。
• 編寫文件內容，和咱們以前講過的同樣，文件要包括三個部分<template><script>和<style>。文件很簡單，只是打印一句話。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
 
<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am JSPang'
    }
  }
}
</script>
 
 
<style scoped>
 
</style>
複製代碼

• 引入 Hi組件：咱們在router/index.js文件的上邊引入Hi組件 import Hi from '@/components/Hi'
• 增長路由配置：在router/index.js文件的routes[]數組中，新增長一個對象，代碼以下。

{
  path:'/hi',
  name:'Hi',
  component:Hi
}
複製代碼

router-link製做導航

如今經過在地址欄改變字符串地址，已經能夠實現頁面內容的變化了。這並不知足需求，咱們須要的是在頁面上有個像樣的導航連接，咱們只要點擊就能夠實現頁面內容的變化。製做連接須要<router-link>標籤，咱們先來看一下它的語法。 <router-link to="/">[顯示字段]</router-link>

子路由

改造App.vue的導航代碼

App.vue代碼，注意<route-view>的用法。

<template>
  <div id="app">
    <img src="./assets/logo.png">
      <p>導航 ：
      <router-link to="/">首頁</router-link> | 
      <router-link to="/hi">Hi頁面</router-link> |
      <router-link to="/hi/hi1">-Hi頁面1</router-link> |
      <router-link to="/hi/hi2">-Hi頁面2</router-link>
      <router-link to="/hi1">Hi頁面</router-link> 
     </p>
    <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>

複製代碼

改寫components/Hi.vue頁面

把Hi.vue改爲一個通用的模板，加入標籤，給子模板提供插入位置。「Hi頁面1」 和 「Hi頁面2」 都至關於「Hi頁面」的子頁面，有點想繼承關係。咱們在「Hi頁面」里加入標籤。
Hi1.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am Hi1!'
    }
  }
}
</script>
<style scoped>
 
</style>
複製代碼

Hi2.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am Hi2'
    }
  }
}
</script>
<style scoped>
</style>
複製代碼

Hi.vue代碼

注意新增的router-view

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-view class="aaa"></router-view>
  </div>
   
</template>
 
<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am JSPang'
    }
  }
}
</script>
 
 
<style scoped>
 
</style>
複製代碼

修改router/index.js代碼

咱們如今導航有了，母模板和子模板也有了，只要改變咱們的路由配置文件就能夠了。子路由的寫法是在原有的路由配置下加入children字段。

children:[
{path:'/',component:xxx},
{path:'xx',component:xxx},
]
複製代碼

children字段後邊跟的是個數組，數組裏和其餘配置路由基本相同，須要配置path和component。具體看一下這個子路由的配置寫法。

import Vue from 'vue'   
import Router from 'vue-router'  
import Hello from '@/components/Hello'  
import Hi from '@/components/Hi' 
import Hi1 from '@/components/Hi1' 
import Hi2 from '@/components/Hi2' 
 
Vue.use(Router) 
 
export default new Router({
  routes: [             
    {                    
      path: '/',        
      name: 'Hello',     
      component: Hello   
    },{
      path:'/hi',
      component:Hi,
      children:[
        {path:'/',component:Hi},
        {path:'hi1',component:Hi1},
        {path:'hi2',component:Hi2},
      ]
    }
  ]
})
複製代碼

參考連接

技術胖vue-router