vueRouter个人笔记

组合式函数的基本使用

选项式都是this.$router.push()的方式，组合式是

import { useRouter, useRoute } from 'vue-router'
//要在外面定义，在函数里面定义无法识别的
const router = useRouter()
const route = useRoute()

const test = () =>{
    console.log(router)
    console.log(route.query)

    router.push({name:'about'})
    // router.push({name:'about'})
}
1
2
3
4
5
6
7
8
9
10
11
12

这样就和选项式的一样了

router view

这个老熟悉了，现在可以一个组件多个router view。 https://router.vuejs.org/zh/guide/essentials/named-views.html
但现在一般都是只有一个router view就可以了

横跨历史

router.go(1)
router.replace({ path: ‘/home’ })
老熟悉了

导航守卫

前置守卫

/**
 * to: 即将进入的目标
 * from: 正要离开的路由
 */
//可以加第三个参数，next，但是不推荐，推荐用return true
router.beforeEach((to,form) => {
  console.log(to)
  console.log(form)
    return true
    
})
1
2
3
4
5
6
7
8
9
10
11

或者可以return到一个页面

router.beforeEach((to,form) => {
  
    //记得要加判断条件，不然已经跳到了还要跳，就无限循环了
  if (to.name === 'home'){
    return {name:'about'}
  }
})
1
2
3
4
5
6
7

全局解析守卫

每一次导航都会被触发的函数

router.beforeResolve(to => {
  console.log("每次都会出发的")
})
1
2
3

全局后置钩子

刚才的是前置，这个是后置。
后置可以对一些页面做分析，改标题等辅助作用

router.afterEach((to,form)=>{
  
})
1
2
3

路由独享守卫

就是针对某一个路由，在跳转之前，他想做的事情

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    //  独享守卫
    beforeEnter: (to, from) => {
      return false
    },
  },
]
1
2
3
4
5
6
7
8
9
10

或者

function removeQueryParams(to) {
  if (Object.keys(to.query).length)
    return { path: to.path, query: {}, hash: to.hash }
}

function removeHash(to) {
  if (to.hash) return { path: to.path, query: to.query, hash: '' }
}

const routes = [
    {
        path: '/users/:id',
        component: UserDetails,
        //数组的形式添加函数
        beforeEnter: [removeQueryParams, removeHash],
    },
    {
        path: '/about',
        component: UserDetails,
        beforeEnter: [removeQueryParams],
    },
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在组件内使用守卫

就是在js中可以使用守卫

import { onBeforeRouteLeave, onBeforeRouteUpdate} from 'vue-router'

  onBeforeRouteUpdate((to,from)=>{

  })
  onBeforeRouteLeave((to,from)=>{

  })

1
2
3
4
5
6
7
8
9

路由元信息

就是非常熟悉的meta，在写路由的时候添加一常量

const routers = [
    {
        path: 'main',
        name: 'Main',
        component:  () => import('@/views/Main/Index'),
        meta:{
            title: '标题',
            doucumentTitle:'测试标题',
            keepAlive: true,
        }
    },
]
1
2
3
4
5
6
7
8
9
10
11
12

用的时候就可以to.meta.xxx

滚动行为

在创建router示例的时候，加个scrollBehavior 方法

const router = createRouter({
    history: createWebHashHistory(),
    routes: [...],
    //路由跳转，回到顶部
    //to准备去的页面，from先前的页面，savedPosition是按下后退/前进按钮的时候
    scrollBehavior(to, from, savedPosition) {
        // 如果是按下按钮后退或者前进，就不进行滚轮
        if (savedPosition) {
            return savedPosition
        } else {
            return {top: 0}//回到顶部，
            // 或者也可以相对于某个元素的位置
            // return {
            //     el: '#main',
            //     top: -10,
            // }
        }
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19