路由概念

  一个路由就是一组映射关系(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('服务器启动成功')
})

   

 书写完必要数据后,在终端输入启动命令: npm server

在浏览器输入监听的端口号和路由路径

然后新建static文件夹,准备放入前端编译好的静态文件 

编译vue文件,将之前写好的demo进行编译,打开终端输入npm run build命令

 编译完之后,项目文件路径会多出一个文件夹dist

将dist里的文件复制到刚才新建的static文件夹下

直接在浏览器地址栏输入localhost:8001

 这个时候我们之前写的demo就已经部署在我们的前端服务器上了

路由器默认工作模式为hash 此时我们将路由器的工作模式调整为history

 ,然后再编译,将重新编译后的静态文件重新放入static文件夹下,再重新前端服务

 这个时候发现如果路由器是history模式的话,在浏览器地址栏上如果有路由资源的话,此时点击浏览器刷新按钮会出现404路径错误,而在hash模式下是没有这种情况的

此处推荐使用一个node的插件来解决这个问题

输入安装命令npm i connect-history-api-fallback

安装完后引用并使用 

重新服务器

 可以看到此时再刷新网页,就不会出现404问题了