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基础的应该是可以看得懂的,希望对那些不知道如何使用路由来实现页面跳转的人有所启发