vue框架的（路由开发）框架

路由开发

vue-router 官网导航守卫 | Vue Router

命名路由

在路由文件index.js当中，对路由设置name属性

!在调用的时候通过对象格式调用

路由传参

动态路由

this.$route.params
​
定义路由的时候
.......
{
    path: "/index/:id"
    .......
}
调用路由的时候
<router-link :to="'/index/'+user.id"
获取参数
this.$route.params.id

get请求，请求携带参数，参数以问号开始，键=值，以&分割，请求参数明文添加在url上，相比较动态路由，get请求传参有一下好处：

1、传参数据多

2、使用方便

get请求可以通过手动评价url实现，所以具有一定的风险

vue可以通过内置的$route.query方法获取get请求参数

命名视图

在之前的内容当中，我们一直采用的是一个路由视图<router-view>

就是在router-view标签上添加name属性，然后再路由上，将component替换为components,然后形成对象格式，进行路由加载组件的映射。

必须要设置一个default命名视图，默认如果路由传递了一个组件，那么就让default执行的router-view进行加载

路由元信息

meta

$route

params

query

路由模式

运行项目

npm run serve

打包命令

npm run build (整理，构建)

就是将项目的html和静态文件抽离整合成前端项目

但是打包有两种模式：

默认hash模式，路由含有#/，需要使用默认服务器打开才可以看到

history: 路由上没有#/，可以直接打开使用

vue.config.js

路由守卫

生命周期在vue从创建到销毁的过程当中执行。

但是对于每次请求，其实需要一部分限制，比如登录限制，比如校验。所以在路由上有路由守卫。

路由全局守卫

全局前置守卫

在路由跳转之前执行，有三个参数

to 目的地路由route对象

from 源路由route对象，注意直接使用路由跳转，容易失去from

next 跳转,默认跳转to的地址，可以自定义跳转地址

router.beforeEach

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
​
Vue.use(Router) //让vue使用Router
​
​
.......
​
var r = new Router({
    routes: router,
    linkActiveClass: "active",
    base: '/index/',
}) //导出路由对象，对象已经加载规则
​
r.beforeEach((to,from,next)=>{
    "to: 目的地路由的$route对象"
    "from: 源路由的$route对象"
    console.log(to,from)
    if(to.path==="/food"){
        return next('/index')
    }
    return next()
})
​
export default r

全局前置守卫，在工作当中主要用于，登录，权限等设置。

全局解析守卫

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

import Vue from 'vue'
import Router from 'vue-router'
​
Vue.use(Router) //让vue使用Router
​
​
.....
r.beforeResolve((to,from,next)=>{
    console.log("beforeResolve+++++++++++++++++++++++++++++++++++")
    console.log(to,from)
    return next()
})
export default r

全局后置钩子

import Vue from 'vue'
import Router from 'vue-router'
​
Vue.use(Router) //让vue使用Router
​
​
......
r.afterEach((to,from)=>{
    console.log("afterEach+++++++++++++++++++++++++++++++++++")
    console.log("[2021-10-28 14:24:14 ]"+from.path+" TO "+to.path)
})
​
export default r

路由独享守卫

在beforeEach执行后执行，只单独对一个路由生效

import Vue from 'vue'
import Router from 'vue-router'
​
Vue.use(Router) //让vue使用Router
​
​
const router = [
    {
        path: "/login",
        component: ()=> import("../views/login.vue"),
        meta: {
            title: "登录"
        },
        beforeEnter(to,from,next){
            if(from.path === "/sf"){
                next()
            }else{
                next("/sf")
            }
            console.log("beforeEnter+++++++++++++++++++++++++++++++++++")
            console.log(to)
            console.log(from)
            next()
        }
    },
    .......
    {
        path: "*",
        component: ()=> import("../views/Page_404.vue")
    }
] //路由的规则
......
​
export default r

组件内守卫

<template>
  <div id="login_id">
      <div class="panel">
          <h2>登录</h2>
          <form>
              <button class="login_button" @click="login">登录</button>
          </form>
      </div>
  </div>
</template>

<script>

export default {
    methods: {
        login(){
            this.$router.push("/layout")
        }
    },
    beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log(to,from)
    console.log("beforeRouteEnter+++++++++++++++++++++++++++++++++++++++")
    next()
    }, //进入组件后就执行，可以对用户的操作进行限制
    beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log(to,from)
    console.log("beforeRouteUpdate+++++++++++++++++++++++++++++++++++++++")
    next()
    }, // 在当前路由改变，检测提交的信息是否合法
    beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log(to,from)
    console.log("beforeRouteLeave+++++++++++++++++++++++++++++++++++++++")
    next()
    } //对离开页面没有完成操作提醒
}
</script>

<style>
.......
</style>

按照顺序

全局前置守卫

路由独享(beforeRouteLeave）

组件内守卫

全局解析

全局后置钩子

路由滚动

由于vue是单页面开发，组件跳转采用的是a标签的锚点逻辑，跳转之后，没有刷新页面，导致，在a页面的滚动条状态会保留到跳转到b页面的时候。这种情况下需要手动的调整滚动条位置。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router) //让vue使用Router

.......

var r = new Router({
    routes: router,
    linkActiveClass: "active",
    scrollBehavior(to,from,point){
        console.log(arguments,"----------------------------------")
        console.log(to,from,point)
        return {x:0,y:0} //默认滚动到顶部
    }
}) //导出路由对象，对象已经加载规则
.......

export default r

登录案例

登录成功，跳转首页

登录失败，返回登录页

如果没有登录禁止访问首页

不登录也可以访问登录页面