vue3 路由useRoute 和useRouter的使用

最近的新项目采用vue3来实现，vue2跟vue3还是有所变化的，useRoute相当于vue2的this.$route，而useRoute相当于vue2的this.$router。

 通过useRouter来手动控制路由变化

import { useRouter } from 'vue-router'

export default{
    setup(){
      const router = useRouter()
      router.push({path:'/index'})
    }
}

通过useRouter传参的三种方式

隐式传参params

import { useRouter } from 'vue-router'
export default {
	setup() {
		const router= useRouter()
		router.push({
			name: 'index',
			params: {
				name: 'youfei',
				age: 18
			}
		})
	}
}

请注意params只与name搭配生效，name就是route配置时的name

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'index',
    component: index
  }
]

通过useRoute来接收params参数

import { useRoute } from 'vue-router'
export default {
	setup() {
		const route = useRoute()
    	console.log(route.params)
	}
}

显式传参query

import { useRouter } from 'vue-router'
export default {
	setup() {
		const router= useRouter()
		router.push({
			path: '/',
			query: {
				name: 'youfei',
				age: 18
			}
		})
	}
}

path与query是一对，name和params是一对，请别混用。

通过useRoute来接收query参数

import { useRoute } from 'vue-router'
export default {
	setup() {
		const route = useRoute()
    	console.log(route.query)
	}
}

总结一下显式路由和隐式路由的区别
除了它们的传递和接收方式不同外

显式query会很明显的跟在新的url上，而隐式params不会
隐式params在刷新后可能会消失，我们可以在它存在的时候存如缓存中，如localstorage
隐式params比显式query相对而言更安全，不会将参数直接暴露给用户
显示query在浏览器的url上，如果你直接通过字符串的方式去取，可能会涉及转码等问题，

当然useRoute将这些都处理好了，所以还是推荐通过useRoute.query去取显式路由的参数