做网站一般分几种,做英文网站费用多少,推广文案格式,四川发布干部任前公示7 路由 摘要#xff1a;在本文中我们会谈及路由的知识点#xff0c;了解前端路由工作的过程以及如何在Vue3中配置路由#xff0c;知道怎么使用嵌套路由和实现动态路由匹配#xff0c;以及使用编程式导航和导航守卫。 声明#xff1a;为了文章的清爽性#xff0c;在文章内…7 路由 摘要在本文中我们会谈及路由的知识点了解前端路由工作的过程以及如何在Vue3中配置路由知道怎么使用嵌套路由和实现动态路由匹配以及使用编程式导航和导航守卫。 声明为了文章的清爽性在文章内部的代码演示中只会附上部分演示代码main.js文件的代码通常不贴出如果感兴趣可以前往代码仓库获取 作者来自ArimaMisaki创作 文章目录7 路由7.1 路由的概念7.2 前端路由的工作方式7.3 简易路由7.4 Vue路由解决方案7.5 Vue-router的基本使用7.6 路由重定向7.7 路由链接美化7.8 嵌套路由7.9 动态路由7.10 获取动态路由参数值的两种方案7.11 编程式导航7.11.1 什么是编程式导航7.11.2 vue-router中编程式导航的API7.12 命名路由7.12.1 声明式导航7.12.2 编程式导航7.13 导航守卫7.13.1 全局导航守卫7.13.2 守卫方法的三个形参7.1 路由的概念
后端路由请求方式、请求地址于function处理函数之间的对应关系。
SPA一个web网站只有唯一的一个HTML页面所有组件的展示和切换都在这唯一的一个页面内实现。此时不同组件之间的切换需要通过前端路由来实现。
前端路由Hash地址和组件之间的对应关系点击不同的链接可以切换不同的哈希地址从而达到切换组件的效果。 7.2 前端路由的工作方式
说明
用户点击了页面的路由链接URL地址栏中的Hash值发生了变化前端路由监听到Hash地址的变化前端路由把当前Hash地址对应的组件渲染到浏览器中 7.3 简易路由
说明使用动态组件location.hashwindow.onhashchange可以达到一个简易路由的效果这里不再演示。 7.4 Vue路由解决方案
说明在实际开发中只要是Vue项目我们都可以使用官方推荐的Vue-router来实现路由。
版本vue-router有3.x和4.x的版本其中3.x只能搭配Vue24.x只能搭配Vue3
安装npm i vue-routernext -S 7.5 Vue-router的基本使用
链接标签router-link
路由组件标签router-view
说明使用router-link标签代替传统的a标签可以让我们在不刷新网页的情况下改变哈希地址其中router-link标签中带有属性to其值为哈希地址我们可以将router-link对应的组件渲染到router-view标签之上。
使用步骤
在项目中创建router.js路由模块从vue-router中按需导入两个方法其中createRouter用于创建路由createWebHashHistory用于指定路由工作模式创建路由实例对象向外共享路由实例对象在main.js中导入并挂载路由模块
templatedivh1Vue-router的基本使用/h1hrrouter-link to/home首页/router-linkrouter-link to/movie电影/router-linkrouter-link to/about关于/router-linkhrrouter-view/router-view/div
/templatescript
export default {name:MyApp
}
/scriptimport {createRouter,createWebHashHistory} from vue-router
import Home from ./MyHome.vue
import About from ./MyAbout.vue
import Movie from ./MyMovie.vue// 1.创建路由实例对象
const router createRouter({// 2.指定路由工作模式为了简化学习我们采用Hash模式history:createWebHashHistory(),// 3.指定路由地址及其对应组件routes:[{path:/home,component:Home},{path:/movie,component:Movie},{path:/about,component:About}]
})// 4.前往main.js调用app.use全局挂载该路由实例对象
export default routerimport { createApp } from vue
import App from ./components/02.start/App.vue
import router from ./components/02.start/Routerconst app createApp(App)
app.use(router)
app.mount(#app)7.6 路由重定向
说明路由重定向是值用户在访问地址A的时候强制用户跳转到地址C从而展示特定的组件页面。
解决方案在routes数组中需要重定向的对象中添加redirect属性并设置其值为重定向的地址。
import {createRouter,createWebHashHistory} from vue-router
import Home from ./MyHome.vue
import About from ./MyAbout.vue
import Movie from ./MyMovie.vue// 1.创建路由实例对象
const router createRouter({// 2.指定路由工作模式为了简化学习我们采用Hash模式history:createWebHashHistory(),// 3.指定路由地址及其对应组件routes:[{path:/,redirect:/home},{path:/home,component:Home},{path:/movie,component:Movie},{path:/about,component:About}]
})// 4.前往main.js调用app.use全局挂载该路由实例对象
export default router7.7 路由链接美化
引入由于我们不再使用传统的a标签这也就导致了无法再使用传统的css美化样式对其进行美化。
说明我们对于router-link有两个美化的解决方案
使用默认的class类被激活的路由链接默认会应用一个叫做router-link-active的类名。开发者可以使用此类名选择器为激活的路由链接设置样式。自定义路由的class类在创建路由的实例对象时可以基于与history平级添加一个linkActiveClass属性值为自定义的类名。 7.8 嵌套路由
说明通过路由实现组件的嵌套展示叫做嵌套路由。也就是说在一个大组件中包含了多个小组件一个页面可以通过路由来切换不同的大组件大组件中也可以根据嵌套路由来切换不同的小组件。
使用嵌套路由的方式是在父路由的创建路由方法中添加children规则children是一个数组里面可以存放多个路由对象嵌套子路由对象和一般的路由对象写法完全一样。 写法
import {createRouter,createWebHashHistory} from vue-router
import Home from ./MyHome.vue
import About from ./MyAbout.vue
import Movie from ./MyMovie.vueimport Tab1 from ./tabs/MyTab1.vue
import Tab2 from ./tabs/MyTab2.vue// 1.创建路由实例对象
const router createRouter({// 2.指定路由工作模式为了简化学习我们采用Hash模式history:createWebHashHistory(),// 3.指定路由地址及其对应组件routes:[{path:/,redirect:/home},{path:/home,component:Home},{path:/movie,component:Movie,name:mov},{path:/movie/:id,component:Movie},{path:/about,component:About},{path:/about,component:About,redirect:/about/tab1,children:[// 子级路由不要以斜线开头{path:tab1,component:Tab1},{path:tab2,component:Tab2}]}]
})// 4.前往main.js调用app.use全局挂载该路由实例对象
export default router7.9 动态路由
引入在之前的学习中实际上出现了一个问题。当我们指定一个路由链接时都需要为其指定一个路由规则这样做的话随着路由链接的增多若规则大同小异则会使得代码复用性差。 说明动态路由的做法是把Hash地址中可变的部分定义为参数项从而提高路由规则的复用性具体的做法是在vue-router中使用英文的冒号:来定义路由的参数项。
router-link to/home首页/router-linkrouter-link to/movie/1电影1/router-linkrouter-link to/movie/2电影2/router-linkrouter-link to/movie/3电影3/router-linkrouter-link to/about关于/router-link{path:/movie/:id,component:Movie},7.10 获取动态路由参数值的两种方案
说明在动态路由中我们可以通过:的方式来指定动态参数值当时我们不知道如何在组件中获取该参数值。为此Vue提供了两种做法可用于获取参数对象。
$route.parms参数对象使用props来接收路由参数 7.11 编程式导航
7.11.1 什么是编程式导航
说明通过调用API实现导航的方式叫做编程式导航与之对应的通过点击链接实现导航的方式叫做声明式导航。如
普通页面中点击a链接vue项目中点击router-link都属于声明式导航普通网页中调用location.href跳转到新页面的方式属于编程式导航 7.11.2 vue-router中编程式导航的API
说明Vue-router提供了许多编程式导航的API其中最常用的两个API分别是
this.$router.push(‘hash地址’)用于跳转到对应哈希地址的组件this.$router.go(数值n)n设置为-1可以回退上一个组件页面
templatedivh1MyHome组件/h1/divbutton clicktoMovie(3)跳转到电影3/button/templatescriptexport default {name:MyHome,methods:{toMovie(id){this.$router.push(/movie/id)}}}/scripttemplatedivh1MyMovie标签/h1button clickgoBack()回退上一个页面/button/div/templatescriptexport default {name:MyMovie,methods:{goBack(){this.$router.go(-1);}}}/script7.12 命名路由
7.12.1 声明式导航
说明通过name属性为路由规则定义名称的方式叫做命名路由。
templatedivh1MyHome组件/h1router-link :to{name:mov}go to movie/router-link/div/templatescriptexport default {name:MyHome,}/script{path:/movie,component:Movie,name:mov}7.12.2 编程式导航
说明调用push函数期间指定一个配置对象name是要跳转到的路由规则params是携带的路由参数。
templatedivh1MyHome组件/h1router-link :to{name:mov}go to movie/router-linkbutton clickgotoMovie去电影组件/button/div/templatescriptexport default {name:MyHome,methods:{gotoMovie(){this.$router.push({name:mov})}}}/script7.13 导航守卫
说明导航守卫可以控制路由的访问权限。
示意图 7.13.1 全局导航守卫
说明全局导航守卫会拦截每个路由规则从而对每个路由进行访问权限的控制导航守卫本质上是一个钩子在使用路由之前时我们都会使用这个钩子。
使用方式router.beforeEach(fn) 7.13.2 守卫方法的三个形参
to目标路由对象
from当前导航正要离开的路由对象
next一个函数表示放行如果在守卫方法中不声明next形参则默认允许用户访问每一个路由如果守卫方法声明了next形参则必须调用next函数后才能访问路由
