vue-router

彬__

已于 2024-09-09 10:25:18 修改

阅读量1.4k

点赞数 15

分类专栏：前端 js vue 文章标签： vue.js 前端 javascript

于 2024-09-09 10:18:48 首次发布

本文链接：https://blog.csdn.net/yeah_bin/article/details/142050898

版权

vue 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

vue-router

模式 mode

history
hash

history和hash模式的区别：

hash模式：

url结构：浏览器地址栏中会显示#，hash值表示不同的页面
兼容性好，基本上所有浏览器都支持
不需要后端额外配置
页面切换时，浏览器地址栏中的 hash 值会改变，但不会向服务器发送请求。利用 window.onhashchange 事件来监听 hash 值的变化，从而实现页面的切换。
搜索引擎优化seo不太友好：浏览器无法识别hash部分，无法被搜索引擎收录。

history模式：

url结构：浏览器地址栏中不会显示#
需要后端配置，如：nginx、apache、iis等
兼容性不太友好，老版本不支持，需要做兼容处理。
通过 window.history.pushState 和 window.history.replaceState 方法来实现，监听popstate事件，从而实现页面的切换。
seo：对 SEO 更友好，因为标准的 URL 结构更符合搜索引擎的抓取习惯

设置router

path
name
conmpoent
hash
props
meta
beforeEnter
redirect

引入vue-router

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
route = []

router = new Router({
    route,
    mode: 'hash',
    scollBehavior: (to, from, savedPosition) {
        if(to.hash) {
            return {
                selector: to.hash,
                behavior: 'smooth'
            }else if(savedPosition) {
                return savedPosition
            })else {
                return { x: 0, y: 0 }
            }
        }
    }
})
router.beforeEach((to, from, next) => {
//TODO
}
const routerPush = Router.prototype.push
Router.prototype.push = function push(to) {
    return routerPush.call(this, to).catch(err => err)
}
const routerReplace = Router.prototype.replace
Router.prototype.replace = function replace(to) {
    return routerReplace.call(this, to).catch(err => err)
}
export deault router


// main.js
import router from './router'
new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

路由传参

props

布尔值：true/false
props: true => 会将路由参数映射到组件的props中
对象：{a:1,b:2}
传递静态参数，会将传递的参数映射到组件的props中
函数：(route)=>{}
函数默认有个route参数，可以获取到路由信息，可以将路由信息中的任意数据传到组件中，最常用

query

传递的值，会以键值对的形式拼接到url后面，如：/user/name=shebin&age=18
可以通过name+query、path+query 的方式传参

pramas

如果是动态参数，动态参数会传递到路由的params中，如：/user/:id，如果不是动态参数，则不会
只能以name+params的方式跳转，如：this.$router.push({name:‘user’,params:{id:1}})

to：路由地址
- 字符串: 跳转目标路径
- 对象 {path:‘’,query:{}}、{name:‘’,params:{}} 、{name:‘’,params:{},query:{}}、{path:‘’,hash：‘’,query:{}}
- 函数传递的是组件的methods中的方法，返回一个代表路径的对象或者字符串
replace：是否替换当前路由，默认为false
replace 替代模式，默认是push模式
激活状态：activ-class、exact-active-class、active-class exact
是否精准匹配路径
- 设置激活状态的类名，非精准匹配模式下，当前路径及其父路径都会被激活;带query参数的设置后，不带query参数的路径也会被激活
- 精准匹配模式下，父路径不会被激活，带query参数的路径设置后，不带query参数的路径不会被激活，带不同query参数的路径也不会被激活

编程式导航

返回的是一个Promise，返回一个promise，可以链式调用then、catch

push

this.$router.push(path|location|name|function)

replace

this.$routter.replace(path|location|name|function)

go(n)

this.$router.go(n)

go(-1)：返回上一页
go(1)：前进一页
go(n)：跳转到路由栈中指定位置，如：go(-2)，跳转到路由栈中倒数第二个路由，go(2)，跳转到路由栈中第二个路由
go(0)：刷新当前页

back(n)

forward(n)

push和replace的区别

push：将目标路由添加到路由栈中，并跳转
replace：将目标路由替换路由栈中当前路由，并跳转

keepAlive 保持激活状态

路由守护

执行顺序

beforeEach -> beforeEnter -> beforeRouteEnter/beforeRouteUpdate -> beforeResolve -> afterEach
在这里插入图片描述

全局守护

全局前置守护 beforeEach(to,from, next)

在开始跳转到目标路由之前执行，主要进行鉴权、登录等校验，在每次导航开始时触发

全局后置守护 afterEach(to,from)

在路由跳转完成后被调用。全局后置守卫主要用于执行一些在路由跳转后需要进行的操作，例如页面滚动、统计PV（页面浏览量）等。

全局解析守护 resolve(to,from, next)

在路由each、enter之后执行，主要进行路由解析，主要用于在进入路由前执行异步操作，如数据预加载

路由独有守护

beforeEnter(to,from, next)，在和beforeEach完全相同，如果都设置则在beforeEach之后紧随执行。在进入特定路由之前触发，不会在重复导航到相同路由（即使参数不同）或uodate时触发

组件守护

beforeRouterEnter’(to,from, next)

在组件中设置，在beforeEnter之后执行，

调用时机：在当前路由改变，但该组件被创建之前触发。只在组件第一次渲染时触发，重复跳转路由不触发
特点：此时组件实例还没有被创建，因此不能通过this访问组件实例。可以通过next回调函数的参数来访问即将被创建的组件实例
用途：通常用于执行一些初始化操作，例如从服务器获取数据、设置组件的初始状态等。

beforeRouteUpdate’(to,from, next)

在组件中设置，调用时机：当路由参数发生变化导致该组件被复用时调用。

特点：此时组件实例已经存在，因此可以通过this访问组件实例。
用途：当路由参数变化时，你可能需要基于新的参数更新组件的状态或执行其他操作。示例：例如，在一个用户详情组件中，当用户ID从路由参数中变化时，你可能需要重新获取对应用户的信息。

beforeRouteLeave’(to,from, next)

在组件中设置，调用时机：在导航离开该组件的路由时调用。

特点：此时组件实例存在，可以通过this访问组件实例。
用途：通常用于执行一些清理工作，例如取消定时器、清除DOM事件监听器等。

 export default{
 	data(){
 		return{}
 	},
 	beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  	},
  	beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  	},
  	beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  	}

next(path|location|false)

next()：继续执行
next(false)：取消导航
next(path|location)：跳转到指定路由
- path：跳转目标路径
- location：跳转目标路由对象，如：{path:‘’,query:{},params:{},hash:‘’}

嵌套路由

父子路由，子路由的path必须以父路由的path为前缀，如：/user/:id/profile，/user/:id/profile/edit

步骤：

在父路由中配置子路由
- 父路由设置默认子路由，如：redirect:‘/user/profile’
- 子路由的path设置为空，如：path:‘’

const router = new Router({
    routes: [
        {
            path: '/user',
            component: User,
            redirect: '/user/profile',
            children: [
                {
                    path: 'profile',
                    component: Profile
                    name: 'profile'
                    meta: {
                        title: 'profile' 
                        requireAuth: true
                        requireLogin: true
                        requireAdmin: true
                        requireRole: 'admin' 
                        requirePermission: ['profile','edit','delete','add','update','list','detail','create','delete','update']
                    }
                }
            ]

在父路由中配置子路由，并在父路由对应的组件中使用router-view标签，表示子路由的占位

<router-view></router-view>

滚动行为

new Router({
    scrollBehavior(to, from, savedPosition) {}
})

定位到估计位置

scrollBehavior(to, from, savedPosition) {
    return { x: 0, y: 0 }}
}
或者
scrollBehavior(to, from, savedPosition) {
    return {
        top: 0
    }
}

定位到历史位置
通过后退、前进、前进后退等操作，定位到历史位置

scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
        return savedPosition
    }
}

定位到锚点或者某个元素上

scrollBehavior(to, from, savedPosition) {
    定义到某个css选择器对应的元素上
    return { selector: '#el' }
}
或者
scrollBehavior(to, from, savedPosition) {
  if(to.hash){
    return {
        d定位到锚点
        selector: to.hash
        相对锚点的偏移量
        offset: {
            x: 0,
            y: 100 //偏移方向
        }
        // 平滑滚动
        behavior: 'smooth'
    }
  }