路由 Vue-routerII

6.8 编程式路由导航

1、作用：

不借助<router-link>实现路由跳转，让路有跳转更加灵活

2、具体编码

push和replace方法调用一致

3、其他API

6.9 缓存路由组件：让不展示的路由组件保持挂载，不被销毁

1、作用

当我们在组件一中输入信息后切入到组件二，返回组件一时刚输入的数据均未保存，因此需要有路由组件缓存。
让不展示的路由组件保持挂载，不被销毁。

2、具体编码

在哪里需要缓存路由，就在那个组件中加如下代码

6.10 两个新的生命周期钩子

1、作用

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

2、具体名字

• activated路由组件被激活时触发
• deactivated路由组件失活时触发

3、案例

6.11 路由守卫

1. 作用：对路由进行权限控制
2. 分类：全局守卫、独享守卫、组件内守卫

   1、全局守卫

3. 全局前置路由守卫：初始化的时候被调用、每次路由切换之前被调用

router.beforeEach((to, from, next)=>{
   
   
    if(to.path ==='/home'){
   
   
        next();
    }
})

在判断当前路由是否需要权限控制时可使用:
if(to.name === 'news' || to.name === 'message')
if(to.path=== '/home/news' || to.path === '/home/message')

1. 全局后置路由守卫
   文件router\index.js，先在路由routes中的meta配置自定义内容
   

   router.afterEach((to, from)=>{
         
         
    切换之后进行调用的逻辑
   })
   

1. 总结
   

2、独享路由守卫

在想要实现独享路由守卫的路由中配置beforeEnter独享路由守卫
独享路由守卫只有前置beforeEnter无后置，要想配置后置路由，得配置全局后置路由

3、组件内路由守卫：当钩子函数使用

在需要监听的组件内进行放置
通过路由规则进入的守卫，进入该组件时被调用
beforeRouterEnter(to,from,next){}

通过路由规则离开的守卫，离开该组件时被调用
beforeRouterLeave(to,from,next){}

6.12 路由的两种工作模式

区别：

1. 表现形式不同：history 带 # ；hash不带 #
2. 打包后前端自测需要使用hash，如果使用history会出现空白页面
3. 跳转请求：history http://loaclhost:8080/id ==>会发送请求，hash不会发送请求

1、 hash模式：带 "#"

1、对于一个url来说，什么是hash值？——#及其后面的内容就是hash值。
2、hash值不会包含在HTTP请求中，即：hash值不会带给服务器。
3、地址中永远带着#号，不美观。
4、若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记不合法。
5、兼容性较好
红色框中的内容不会作为路径的一部分传给服务器

2、 history模式：不带 "# "

1、地址干净，美观。
2、兼容性和hash模式相比略差。
3、应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。解决方法如下：

解决history模式下刷新页面服务端404的问题

详情可见：https://www.npmjs.com/package/connect-history-api-fallback

第一步：安装npm的中间件connect-history-api-fallback：npm install connect-history-api-fallback

第二步：引入并使用

3、使用：项目上线部署步骤

在router\index.js文件中配置mode

第一步：将vue项目打包生成dist文件夹：npm run build

第二步：打包出来的项目必须放在服务器上部署一遍才可打开

第三步：使用nodejs搭建本地微型服务器，将项目部署
新建一个空文件夹demo，
变成一个合法的包：npm init
安装express：npm install express
资源部署：新建一个文件夹demo\static，将vue项目中打包生成的文件放到static文件夹下

新建一个主文件demo\serve.js，写入如下内容：

// 引入 express
const express = require('express')
// 引入connect-history-api-fallback
const history = require('connect-history-api-fallback');

// 创建app服务于实例对象——直接调用expres()
const app = express()

// 使用connect-history-api-fallback，必须在传入指定资源之前使用
app.use(history())
// 传入指定资源
app.use(express.static(__dirname+'/static'))
// 配置后端路由
app.get('/person',(req,res)=>{
   
   
    // 给客户端返回数据
    res.send({
   
   
        name:'tom',
        age:18
    })
})

// 端口监听，(端口号,(错误信息)=>{
   
   })
app.listen(5005,(err)=>{
   
   
    if(!err) console.log('服务器启动成功了!')
})

启动服务器：node server
访问服务器：localhost:5005/person