助你上手Vue3全家桶之Vue-Router4教程

目录
  • 1,前言
  • 1,Router
    • 2.1,跳转
    • 2.2,打开新页面
  • 3,Route
  • 4,守卫
    • 4.1,onBeforeRouteLeave
    • 4.2,onBeforeRouteUpdate
    • 4.3,路由守卫语法
  • 5,重要变更

1,前言


本文主要讲开发过程中需要常用的,有些api不常用,需要的时候可以自行查找文档。因为V3中没有了this,所以router4语法有所修改,模板中我们仍然可以访问$router$route,所以不需要在setup中返回routerroute

Vue-Router4.0官网

1,Router


这边主要介绍常用的跳转方法修改

2.1,跳转


import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

export default {
	name: 'Home',
	setup() {
		const Router = useRouter()
		const to = function() {
			Router.push({
				name: 'About',
				params: {
					id: 999
				}
			})
		}
		onMounted(() => {
			console.log(Router)
		})
		return {
			to
		}
	}
}

2.2,打开新页面


import { useRouter } from 'vue-router'

export default {
	name: 'Home',
	setup() {
		const Router = useRouter()
		const toBlank = function() {
			const Path = Router.resolve({
					name: 'About',
					query: {
						id: '123'
					}
			})
			window.open(Path.href, '_blank')
		}
		return {
			toBlank
		}
	}
}

3,Route


这边主要讲一下如何获取路由传递的值

路由取值

import { onMounted } from 'vue'
import { useRoute } from 'vue-router'

export default {
	name: 'Home',
	setup() {
		const Route = useRoute()
		onMounted(() => {
			console.log('onMounted')
			console.log(Route.params.id)
			console.log(Route.meta)
		})
	}
}

4,守卫


4.1,onBeforeRouteLeave


可以替代组件内守卫,新增的组合式Api,离开当前页面路由时触发,return false则阻止跳转

import { onBeforeRouteLeave } from 'vue-router'

export default {
  setup() {
    onBeforeRouteLeave((to, from) => {
      if (to.name !== 'home') {
          return false
      }
    })
  }
}

4.2,onBeforeRouteUpdate


新增的组合式Api,路由更新时触发

import { onBeforeRouteUpdate } from 'vue-router'

export default {
  setup() {
    onBeforeRouteUpdate((to, from) => {
      if (to.params.id !== from.params.id) {
        console.log('......')
      }
    })
  }
}

4.3,路由守卫语法


// 原写法
Router.beforeEach((to, from, next) => {
  if (ok) {
    next()
  } else {
    next(false)
  }
})

// 新写法
Router.beforeEach((to, from) => {
    if (ok) {
        console.log('...')
    } else {
        return false
    }
})

5,重要变更


  • 使用createRouter替换new Router()

  • mode: 'history'选项替换为更灵活的名称history

Router3 Router4
history createWebHistory()
hash createWebHashHistory()
abstract createMemoryHistory()
  • base选项移除,修改为createWebHistory等方法的第1个参数传递

  • transitionkeep-alive必须放在router-view里面

  • 删除中的eventappendtag属性

  • router.onReady()函数已被router.isReady()取代

  • 删除router.match改为router.resolve

  • 所有的导航现在都是异步的,如果使用transition,需要等待路由ready好后再挂载程序

  • 带有空path的命名子路由不再添加斜线


如果看了觉得有帮助的,我是@鹏多多,欢迎 点赞 关注 评论;END


PS:在本页按F12,在console中输入document.querySelectorAll('.diggit')[0].click(),有惊喜哦


面向百度编程

公众号

weixinQRcode.png

往期文章

  • 助你上手Vue3全家桶之Vue3教程
  • 助你上手Vue3全家桶之VueX4教程
  • 使用nvm管理node.js版本以及更换npm淘宝镜像源
  • 超详细!Vue-Router手把手教程
  • vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
  • 微信小程序实现搜索关键词高亮
  • 超详细!Vue的九种通信方式
  • 超详细!Vuex手把手教程

个人主页

  • CSDN
  • GitHub
  • 简书
  • 博客园
  • 掘金

你可能感兴趣的:(助你上手Vue3全家桶之Vue-Router4教程)