Vue路由编程

暗武逢天

已于 2022-07-19 17:16:23 修改

阅读量2.8w

点赞数 5

文章标签： vue.js 前端前端框架

于 2022-07-19 16:31:38 首次发布

本文链接：https://blog.csdn.net/m0_51406695/article/details/125844857

版权

路由概念

一个路由就是一组映射关系(key : value)

key为路径 value可能是function 或者component

路由分类

后端路由

value是function 用于处理客户端提交的请求

工作过程: 服务器收到一个请求时根据请求路径找到匹配的函数来处理请求返回响应珊数据

前端路由

value是component 用于展示页面内容

工作内容: 当浏览器的路径改变时对应的组件就会显示

下面来演示一个基本路由的使用:

首先安装路由

注意目前安装路由的默认安装命令安装的路由是4版本的,只可在vue3以上可以使用,而vue2版本需要安装路由的3版本或以下才可以使用这里安装路由的3版本

安装完后新建文件夹router,新建文件index.js

新建Home和About组件

书写路由文件

实现切换

注意上面动图在切换路由点击时,地址栏前的刷新按钮并没有刷新,后面的地址栏也只有about和home之间的变化,并且地址栏中还有/#/这说明vue的路由已经生效

router注意点

路由组件通常存放在pages文件夹中一般组件通常存放在components文件夹

通过切换 '隐藏'的路由组件默认是被销毁掉的需要的时候再去挂载

每个组件都有自己的$route属性里面存储着自己的路由信息

整个应用只有一个router 可以通过组件的$router属性获取到

新建一个Banner组件,用于存刚才的标题,再新建pages文件夹,将刚才配置的路由组件Home和About组件放入pages中

Banner是一般组件,所以在App.vue中需要像以前一样引用才可以使用

嵌套路由(多级路由)

多级路由进行嵌套使用,在路由配置中使用children配置当前路由组件的子级路由

新建News和Message作为Home的子级路由

路由的query传参

新建detail组件

命名路由

可以给路由起一个名字,可以起到简化路由跳转路径的作用

params方式传参

路由的props配置

注意前面props的第二种写法只支持params,不支持query,第一种写法传递数据基本只能传递固定数据,不灵活,第一种写法一般不推荐

第三种写法:

query写法

编程式路由导航(不用<router-link>)

作用: 不借助<router-link>实现路由跳转让路由跳转更灵活

this.$router.push({}) 内传的对象与<router-link>中的to相同

this.$router.replace({}) 替换当前页记录跳转

this.$router.forward()前进

this.$router.back() 后退

this.$router.go(x) 指定步数跳转,当x为正数时,前进x步,当x为负数时,后退x步

页面上出现这个错误是因为使用 this.$router.push或this.$router.replace跳转页面时，对应的query参数和当前地址栏上的参数一样导致

解决方案：可以在this.$router.push或this.$router.replace后面进行异常的捕捉

缓存路由组件

作用: 让不展示的路由组件保持挂载,不被销毁

我们先看不缓存路由组件是什么效果

可以看到在输入框里输入数据后,再切换到message组件,然后再切换回来后刚才input输入的数据清空了

下面使用缓存组件来来解决这一问题

使用keep-alive标签包裹要展示的组件,include指明要缓存的组件名字.如果不指明,默认将所有组件都开启缓存,如果想指明多个组件开启缓存而不是全部组件,可以直接绑定数组写法,

:include='['组件名1','组件名2'......]'

路由组件的生命周期钩子

路由组件所独有的两个钩子用于捕捉路由组件的激活状态

1 activated 路由组件被激活时触发

2 deactivated 路由组件失活时触发

路由守卫

作用: 对路由进行权限控制

分类: 全局守卫独享守卫组件内守卫

全局守卫 meta 路由源信息

全局前置守卫: 初始化时每次路由切换前执行

router.beforeEach((to,from,next)=>{函数体})

全局后置守卫初始化时执行每次路由切换后执行

router.after((to,from,next)=>{函数体})

独享守卫

某个组件所独享的组件路由,独享守卫没有前置后置守卫之说

beforeEnter(to,from,next)

组件内守卫

进入守卫:通过路由规则进入该组件时被调用

beforeRouterEnter(to,from,next)

离开守卫通过路由规则离开该组件时被调用

beforeRouterLeave(to,from,next)

路由器的两种工作模式

对于一个url来说 # 及其后面的内容就是hash值

hash值不会包含在http请求中即 hash值不会被带给服务器

hash模式

地址中永远带着#号 ,不美观

若以后将地址通过第三方手机app分享若app校验严格则地址会被标记为不合法

兼容性较好

history模式

地址干净美观

兼容性和hash模式相比略差

应用部署上线时需要后端人员支持解决刷新页面服务端404的问题

搭建前端建议服务器

新建文件夹,打开终端命令,输入npm init

然后随便起一个名字后一路回车,结束后输入命令 npm express

然后新建一个server.js文件

const express = require('express')
const history = require('connect-history-api-fallback')

const app = express()
app.use(history())
app.use(express.static(__dirname+'/static'))

app.get('/person',(req,res)=>{
    res.send({
        name:'迪迦',
        attr:'超古代的光之巨人'
    })
})

app.listen(8001,(err)=>{
    if(!err) console.log('服务器启动成功')
})