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