1.简介

1.1 为什么要用Vue-router

我想做一个带导航栏的简单web页面,页面的内容可以随导航栏的点击切换。第一个想法是想用webpack打包出几个页面,然后在每个页面的按钮上添加链接,但是这样做每次页面都要刷新,效率上存在很大问题,并且用户点击之后导航栏也会跟着刷新,体验不好,于是发现Vue中的Vue-router很适合实现这种简单的多页面应用。

1.2 Vue-router的两种模式

vue-router在实现单页面前端路由时,提供了两种方式:Hash模式和History模式,默认采用Hash模式。

1.2.1 hash模式

hash模式通过 hash 来实现无刷新路由,url hash 就是类似于:http://www.xxx.com/#/login。“#” 后面就是 hash 值,这个url并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新页面。每次 hash 值的变化,会触发hashchange 事件,通过这个事件js就可以知道 hash 值发生了哪些变化。于是可以通过监听hashchange来实现更新页面部分内容的操作。

1.2.2 history模式

HTML5中多了两个 API,pushState 和 replaceState,通过这两个 API 可以改变 url 地址且不会发送请求。同时还有popstate事件。通过这些就能用另一种方式来实现前端路由了,但原理都是跟 hash 实现相同的。用了HTML5的实现,单页路由的url就不会多出一个#,更加美观。但因为没有 # 号,所以当用户刷新页面之类的操作时,浏览器还是会给服务器发送请求。为了避免出现这种情况,history模式下需要服务器把所有路由都重定向到根页面。

2.Vue-router的使用

2.1 安装

2.1.1 下载/CDN引入

下载地址:https://unpkg.com/vue-router/dist/vue-router.js
CDN引入地址:https://unpkg.com/vue-router@2.0.0/dist/vue-router.js
然后在html页面引入:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

2.1.2 npm安装

终端输入:

npm install vue-router

如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
})

我的是在src下专门创建一个router文件夹,在其中创建index.js,写入上面的内容,然后在main.js中通过引入./router下的组件来引入,这样方便管理

import App from './App'
import router from './router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
})

2.2 实现

2.2.1 路由配置

配置/router/index.js,引入了router和需要的各组件(每一页要展示的内容)后,定义route。它是一个对象,由两个部分组成: path和component. path 指路径,component 指的是组件。如:{path:’/home’, component: home}

export default new Router({
  routes: [
    {
      path: '/homepage',
      component: homepage
    },
    {
      path: '/workpage',
      component: workpage
    },
    {
      path: '/otherpage',
      component: otherpage
    },
    // 重定向
    {
      path: '/',
      redirect: '/homepage'
    }
  ]
})

这里我定义了三个route,每一个分别对应一个组件。

2.2.1 页面实现

在vue-router中, 它定义了两个标签 和来对应点击和显示部分。 就是定义页面中点击的部分, 定义显示部分,就是点击后,区配的内容显示在什么地方。所以 还有一个非常重要的属性 to,定义点击之后,要到哪里去, 如:Home
在vue-cli中,我把routerview放在app的主组件上,用来规范展示的内容的区域:

<template>
  <div id="app">
    <el-container>
      <el-header>
        <div>
          <Nav></Nav>
        </div>
      </el-header>
    </el-container>
    <router-view></router-view>//展示区域在Nav下面
  </div>
</template>

如果要自己写Nav的话,只要将router-link标签包入按钮的div中就可以了,我这里采用的是Element框架中的Nav组件,本身带有router方法,在标签中把router打开,然后下面的按钮添加index属性,就可以完成路由功能,Nav组件内容如下:

<template>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true" @select="handleSelect">
        <el-menu-item index="homepage">首页</el-menu-item>
        <el-menu-item index="workpage">工作</el-menu-item>
        <el-menu-item index="otherpage">作品</el-menu-item>
    </el-menu>
</template>

最终我们在app.vue的主页面中点选Nav中的按钮,就可以顺利展示各个不同的组件了~
这是我的目录结构:
目录结构
本项目代码上传至Github:
https://github.com/Px956678784/Little-Planet

Logo

前往低代码交流专区

更多推荐