vue路由實現項目中的導航欄功能

vue路由實現項目中的導航欄功能

在此,致敬那些曾經用顯而易懂的文章在我黑暗,痛苦的摸索學習道路上中指引方向的大神

前言:

寫這篇文章的目的並非爲了探索多麼難以理解,深奧的問題,而是,曾經,我在項目中遇到這個需求,在實現的路上十分的曲折,而後查找了不少的文章,並沒能獲得十分有效的啓發,學習就是這樣一個過程,有人手把手教你,三兩下就能夠搞定,本身摸索,各類測試,各類報錯,這種心情是很痛苦的,即使如此,咱們仍是強調要具有自主學習,可持續學習的能力,下面的案例是一個很簡單的一個啓發模型,但願能夠幫助你們理解vue路由在項目中的運用

下面正式開始案例

一.需求

實現點擊導航欄的某一個模塊,在導航欄下方顯示相應的頁面

二.環境

vscode+webpack

在開始案例以前,你必需要有一個完整的webpack目錄,若是你沒有,能夠參考我以前的文章

"學習webpack一個案例就夠了"的講解本身搭建,或者在Element UI官網下載基礎模板

三.安裝

先安裝vue

npm install vue --save
複製代碼

再安裝vue-router

npm i vue-router --save
複製代碼

四.新建router.js文件

咱們通常會把有關路由的配置寫在一個獨立的文件中

//導入vue
import Vue from 'vue'
//導入router
import VueRouter from 'vue-router'
//導入要配置路由的組件
import Home from './home'
import About from './about'
//註冊路由
Vue.use(VueRouter)
Vue.config.productionTip = false
//實例化
const router = new VueRouter({
  mode: 'history',//去掉地址欄中的#
  routes:[
    {path:'/',component:Home},
    {path: '/home', component:Home},
    {path: '/about', component:About}
  ]
})
//將該路由暴露出去
export default router
複製代碼

五.新建home.vue,about.vue

在上面的文件中,咱們用到了兩個組件,home組件以及about組件,由於只是啓發模型,因此以最簡單的形式來寫這兩個組件

home.vue

<template>
<div>
  <h1>我是首頁</h1>
</div>
</template>

<script>
export default {

}
</script>

<style>
  
</style>

複製代碼

about.vue

<template>
   <div><h1>我是about</h1></div>

</template>

<script>
export default {

}
</script>

<style lang="">
    
</style>

複製代碼

六.新建header.vue

home,about兩個組件是單獨存在的,那麼怎麼樣和咱們的導航欄造成關係,點擊導航欄的模塊就能加載相應的組件?這就要使用路由

<template>
<div>
  <router-link to='/home'>首頁</router-link>
  <router-link to='/about'>關於</router-link>
  <transition>
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
  </transition>
</div>
</template>

<script>
export default {

}
</script>

<style>
    /*再添加一個簡單的淡入淡出的樣式：*/
    .fade-enter-active, .fade-leave-active{
    	transition: all .3s;
    }
    .fade-enter, .fade-leave-to{
    	opacity: 0;
    }
</style>

複製代碼

<router-view>這個標籤一樣是vue-router的一個內部組件，實際上它是一個是一個 functional 組件,它的做用就是渲染路由導航過來的組件,也就是放置home,about組件的地方,由於它也是個組件，因此能夠配合 <transition> 和 <keep-alive> 使用。若是兩個結合一塊兒用，要確保在內層使用 <keep-alive>

七.修改App.vue文件

一個網站的主頁佈局通常是這個樣子的:

<header><header>
<main></main>
<footer></footer>
複製代碼

main這個區域就是用來顯示咱們點擊了導航某個模塊,這個模塊就加載在這個區域,由於咱們使用了路由,因此實際佈局時,是不用考慮這塊的,到時點擊導航欄加載進來的模塊會顯示在頁面頭和尾之間,在沒有點擊以前咱們通常會默認一個組件顯示在頭尾之間,好比,首頁的內容

拼接這個佈局就在App.vue文件裏完成

<template>
<Header></Header>
</template>

<script>
import Header from './header.vue'
export default {
  components:{
      Header
  }
}
</script>

<style>
  
</style>
複製代碼

主要上面的代碼也是嵌套組件的寫法,我這裏沒有寫尾部組件,因此不用嵌套進來

八.修改main.js文件

//導入vue
import Vue from 'vue'
//導入佈局組件
import App from './App.vue'
//導入router配置文件
import router from './router.js'

new Vue({
  el: '#app',
  router:router,
  render: c => c(App)
})
複製代碼

好了,以上就是路由在項目中應用的啓發模型的關鍵代碼,有vue基礎和webpack基礎的應該是能夠看得懂的,但願對那些不知道如何使用路由來實現頁面跳轉的人有所啓發