由于过往的项目都是使用的vue2，现在转变成vue3难免有点不习惯。特别是在使用了ts后，很多错误信息都不知道该如何处理。所以记录下从零开始的使用过程。
1、定义路由
-
vue2定义
import VueRouter from 'vue-router'
const routes = [ { path: '/index', name: 'index', component: Index, meta: { title: '登录页' } } ]
// 需要创建路由实例 const router = new VueRouter({ routes, mode: 'history', base: process.env.BASE_URL }) export default router
-
vue3+ts定义
import { createRouter, createWebHistory, RouteRecordRaw, RouteMeta } from 'vue-router'
const routes: Array = [ { path: '/index', name: 'index', component: Index, meta: { title: '登录页' } } ]// 直接调用createRouter方法即可const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router
2、路由使用
注：vue2与vue3都可以使用query和params传参，区别在于query传得参数会显示在url中，刷新页面后也是存在的。但是params传参不会显示在url中，刷新即会丢失，除非手动缓存下所带参数。下面举例以query为例：
-
vue2使用
// 跳转 this.$router.push({ path: '/indexDetail', query: { id: '1' } })
// 获取路由参数 const id = this.$route.query.id
-
vue3使用
// 跳转 import { useRouter } from 'vue-router' // 先引入 const router = useRouter() router.push({ path: '/indexDetail', query: { id: '1' } })
// 获取路由参数 import { useRoute } from 'vue-router' // 先引入 const route = useRoute() const id = route.query.id
3、路由的watch监听
-
vue2的监听
export default { watch: { $route: 'getCurrentRoute' }, methods: { getCurrentRoute () {} } }
-
vue3的监听
import { watch } from 'vue' import { useRoute } from 'vue-router' export default { setup () { const route = useRoute() watch(() => route.path, getCurrentRoute) function getCurrentRoute () {} } }
以上为当前使用时遇到的问题合集，后面遇到相关问题会不断记录。
