1 前端路由的概念与原理
1.1 什么是路由
路由(英文:router)就是对应关系。路由分为两大类:
① 后端路由
② 前端路由
1.1.1 后端路由
后端路由指的是:请求方式、请求地址与 function 处理函数之间的对应关系。
例如:
const express = require( 'express ') const router = express.Router() router.get( '/userlist', function(req,res) {/*路由的处理函数*/ }) router.post( '/adduser' , function(req,res) { /*路由的处理函数*/ }) module.exports = router
1.1.2 SPA
SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成。
此时,不同组件之间的切换需要通过前端路由来实现。
在 SPA 项目中,不同功能之间的切换,要依赖于前端路由来完成!
1.1.3 前端路由
Hash 地址与组件之间的对应关系。
1.2 前端路由的工作方式
① 用户点击了页面上的路由链接
② 导致了 URL 地址栏中的 Hash 值发生了变化
③ 前端路由监听了到 Hash 地址的变化
④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中
<component>
组件的占位符。
通过 <component>
标签的 is 属性,动态切换要显示的组件。
2 vue-router 的基本使用
2.1 vue-router
vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换。
2.1.1 vue-router 的版本
vue-router 目前有 3.x 的版本和 4.x 的版本。其中:
vue-router 3.x 只能结合 vue2 进行使用
vue-router 4.x 只能结合 vue3 进行使用
2.2 vue-router 3.x 的基本使用步骤
① 安装 vue-router 包
② 创建路由模块
③ 导入并挂载路由模块
④ 声明路由链接和占位符
⑤ 声明路由的匹配规则
2.2.1 在项目中安装 vue-router
在 vue2 的项目中,安装 vue-router 的命令如下:
npm i vue-router@3.5.2 -S
2.2.2 创建路由模块
在 src 源代码目录下,新建 router/index.js 路由模块,并初始化如下的代码:
// src/router/index.js 就是当前项目的路由模块 // 导入Vue和VueRouter包 import Vue from 'vue' import VueRouter from 'vue-router' // 把 VueRouter 安装为 Vue 项目的插件 // Vue.use() 函数的作用,就是来安装插件的 Vue.use(VueRouter) // 创建路由的实例对象 const router = new VueRouter() // 向外共享路由的实例对象 export default router
此时路由模块与当前项目还未有联系。
2.2.3 导入并挂载路由模块
在 src/main.js 入口文件中,导入并挂载路由模块。
// 导入路由模块,目的:拿到路由的实例对象 // 在进行模块化导入的时候,如果给定的是文件夹,则默认导入这个文件夹下,名字叫做 index.js 的文件 import router from '@/router' // 完整的写法如下 // import router from '@/router/index.js' new Vue({ render: h => h(App), // 在 Vue 项目中,要想把路由用起来,必须把路由实例对象,通过下面的方式进行挂载 // router: 路由的实例对象 // router: router, // 由于一样可以简写成如下 router }).$mount('#app')
此时以及完成了路由的声明和挂载导入,可以使用路由了。
2.2.4 声明路由链接和占位符
<!-- 当安装和配置了 vue-router 后,就可以使用 router-link --> <!-- to 表示要跳转到的位置 --> <router-link to="/home">首页</router-link> <router-link to="/movie">电影</router-link> <router-link to="/about">关于</router-link> <!-- 只要在项目中安装和配置了 vue-router,就可以使用 router-view 这个组件了 --> <!-- 它的作用很单纯:占位符 路由占位符 --> <router-view></router-view>
此时还需要声明路由的匹配规则,才可以实现页面的组件切换。
2.2.5 声明路由的匹配规则
在 src/router/index.js 路由模块中,通过 routes 数组声明路由的匹配规则。
routes 是一个数组,作用:定义 “hash 地址” 与 “组件” 之间的对应关系。
// 导入需要的组件 import Home from '@/components/Home.vue' import Movie from '@/components/Movie.vue' import About from '@/components/About.vue' // 创建路由的实例对象 const router = new VueRouter({ // routes 是一个数组,作用:定义 “hash 地址” 与 “组件” 之间的对应关系 routes: [ // 路由规则 { path: '/home', component: Home }, { path: '/movie', component: Movie }, { path: '/about', component: About } ] })
2.2.6 完成代码
main.js
import Vue from 'vue' import App from './App2.vue' // 导入路由模块,目的:拿到路由的实例对象 // 在进行模块化导入的时候,如果给定的是文件夹,则默认导入这个文件夹下,名字叫做 index.js 的文件 import router from '@/router' // 完整的写法 // import router from '@/router/index.js' // 导入 bootstrap 样式 import 'bootstrap/dist/css/bootstrap.min.css' // 全局样式 import '@/assets/global.css' Vue.config.productionTip = false new Vue({ render: h => h(App), // 在 Vue 项目中,要想把路由用起来,必须把路由实例对象,通过下面的方式进行挂载 // router: 路由的实例对象 // router: router, // 由于一样可以简写成如下 router }).$mount('#app')
App.vue
<template> <div class="app-container"> <h1>App 组件</h1> <!-- 当安装和配置了 vue-router 后,就可以使用 router-link --> <!-- to 表示要跳转到的位置 --> <router-link to="/home">首页</router-link> <router-link to="/movie">电影</router-link> <router-link to="/about">关于</router-link> <!-- 只要在项目中安装和配置了 vue-router,就可以使用 router-view 这个组件了 --> <!-- 它的作用很单纯:占位符 路由占位符 --> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> <style lang="less" scoped> .app-container { background-color: #efefef; overflow: hidden; margin: 10px; padding: 15px; > a { margin-right: 10px; } } </style>
src/router/index.js
// src/router/index.js 就是当前项目的路由模块 // 导入Vue和VueRouter包 import Vue from 'vue' import VueRouter from 'vue-router' // 导入需要的组件 import Home from '@/components/Home.vue' import Movie from '@/components/Movie.vue' import About from '@/components/About.vue' // 把 VueRouter 安装为 Vue 项目的插件 // Vue.use() 函数的作用,就是来安装插件的 Vue.use(VueRouter) // 创建路由的实例对象 const router = new VueRouter({ // routes 是一个数组,作用:定义 “hash 地址” 与 “组件” 之间的对应关系 routes: [ // 路由规则 { path: '/home', component: Home }, { path: '/movie', component: Movie }, { path: '/about', component: About } ] }) // 向外共享路由的实例对象 export default router
2.3 vue-router 4.x 的基本使用步骤
① 在项目中安装 vue-router
② 定义路由组件
③ 声明路由链接和占位符
④ 创建路由模块
⑤ 导入并挂载路由模块
2.3.1 在项目中安装 vue-router
在 vue3 的项目中,只能安装并使用 vue-router 4.x。安装的命令如下:
npm i vue-router@next -S
2.3.2 定义路由组件
在项目中定义 MyHome.vue、MyMovie.vue、MyAbout.vue 三个组件,将来要使用 vue-router 来控制它们的展示与切换:
MyHome.vue
<template> <div> <h3>MyHome 组件</h3> </div> </template> <script> export default { name: 'MyHome', } </script> <style lang="less" scoped></style>