1. router.addRoutes() 添加路由

用法

vue-js-添加路由, 括号里是数组, addRoutes添加后, 新路由还不能直接使用, 需要next(to.fullPath)

2.afterEach()全局后置守卫

code

// 导航后置守卫(当你真正进入到某个页面之后才执行)
  router.afterEach((to, from) => {
    // 设置路由的标题 (可自定义)
    document.title = to.meta.title || '常驻标题'
    // 将所有的页面切换之后滚动到最顶部
    window.scrollTo(0, 0)
  })

3. 解决路由重复报错问题, 实际上就是把错误抓取出来

  const originalPush = VueRouter.prototype.push
  VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch((err) => err)
  }

4 beforeEach白名单

code

  // 访问的白名单, 可以直接通行`
  const whiteList = ['/login']
  router.beforeEach((to, from, next) => {
    // 访问的路径在白名单
    if (whiteList.includes(to.path.toLowerCase())) {
      next()
    } else {
      if (getToken()) {
        next()
      } else {
        next('/login')
      }
    }
  })

用法

• Vue-路由router-导航守卫
• (从一个页面跳转到另一个页面的过程中执行), to 去往何处 from 从何而来, next 控制去不去或者去到哪里, 并且必须要调用, 否则就会一直卡这里,
• next() 如果里面不加任何参数, 就是正常的跳转到下一个页面
• next如果里面加了参数, 就是跳转到指定的页面

5 beforeRouteEnter

• 路由进入之前钩子,对应 beforeCreate()钩子

code

 beforeRouteEnter (to, from, next) {
   
 },

用法

vue-路由router-进入前-路由组件钩子函数

• 路由所对应组件的钩子函数, 它是在组件beforeCreate之前执行的，组件实例化还没有完成，不能访问组件的实例属性与方法的.
• to 去往何处 from 从何而来, next 控制去不去或者去到哪里, 并且必须要调用, 否则就会一直卡这里.
• next() 如果里面不加任何参数, 就是正常的跳转到下一个页面.
• next()如果里面加了参数, 就是跳转到指定的页面

6 beforeRouteUpdate

• 进入前-路由组件钩子函数 对应beforeUpdate钩子

• vue-路由router-进入前-路由组件钩子函数-路由所对应组件的钩子函数, 路由更新了，但是路由所对应组件没有改变时触发

• to 去往何处 from 从何而来, next 控制去不去或者去到哪里, 并且必须要调用, 否则就会一直卡这里,

• next() 如果里面不加任何参数, 就是正常的跳转到下一个页面,

• next()如果里面加了参数, 就是跳转到指定的页面

code

beforeRouteUpdate (to, from, next) {

},

7 导航后置守卫设置-保存要离开页面的滚动距离

• vue-路由router-在导航后置守卫设置-保存要离开页面的滚动距离, 当页面跳转的时候, 保存滚动条距离, 切换回来的时候继续维持原距离

code

  // 保存要离开页面的滚动距离
  from.meta.scrollTop =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop
  // 以下代码为缓存页面使用滚动对应位置的方法, 剪切到需要使用的组件就好
  activated() {
    if (this.$route.meta.scrollTop) {
      window.scrollTo(0, this.$route.meta.scrollTop)
    }
  },

8 router.go(0) 刷新页面路由

9 router.push('/url')路由跳转-无参数,

• 不需要接受参数直接跳转

10 vue-router 缓存滚动对应位置方法

• 在导航后置守卫设置-调用-

activated() {
  if (this.$route.meta.scrollTop) {
    window.scrollTo(0, this.$route.meta.scrollTop)
  }
},

11 vue-router路由模板

• vue路由能够实现路由基本跳转，不同地址对应不同组件内容

npm i vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'
// 注册路由
Vue.use(VueRouter)
// 配置路由
const router = new VueRouter({
  routes: [
    {
      path: '/',
      redirect: '/url',  // 重定向:重新指向其它path,会改变网址
    },
    {
      path: '*',
      redirect: '/url',  // 当输入错网址的时候, 返回该网址
    },
    {
      path: '/home',  // 路径地址
      component: () => import(''),  // 路径地址所对应的组件
    },
    {
      path: '/home',  // 嵌套路由
      component: () => import(''),
      redirect: '/home', // 重定向子路由
      children: [
        子路由中的path前面不要加 /
        {
          path: 'url',
          component: () => import(''),
          meta: { // 路由元信息
            needLogin: true // 路由标记为需要登录, 自定义
          },
        },
      ],
    },
  ],
})
export default router
// 下面两句粘贴到main.js
import router from './router'
router,  // new Vue实例里

路由传参

12 this.$router.back()

• vue-路由, 返回上一个页面-浏览器的后退键

13 this.$route.fullPath

• 记录当前路由访问的页面

14 this.$router.go(0)

• vue-刷新页面路由, 0是刷新页面, -1是返回上一页面

14 this.$router.push('/') 无参数

• vue-路由跳转-无参数, 不需要接受参数直接跳转

15 this.$router.push({}) pat + query 传参

this.$router.push({
  path: '/url',
  query: {
    url的参数, 类似get请求的传参
  },
})

16 记录页面, 然后跳转

    this.$router.push('/?redirect=' + ) vue-路由跳转

17 redirect: '/url', 重定向

重定向:重新指向其它path,会改变网址

18 vue-router-动态路由,

• :id 当前路由必须传入的参数为 id ,
• 相同点: 动态路由的传参方式与query的传参效果是一样的,
• 不同点: 传递的参数不一样,
• 优点: 由于参数是放到路径中拼接而成的, 所以更加美观, 路径更加准确

{
  path: '/name/:id',
  component: name
}

19 this.$route.query.

• vue-路由跳转-接收参数, 接收参数是在路由跳转到xxx组件后，在xxx组件里面接收