一文搞定Vue3中使用vue-router

Posted 贩卖前端仔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一文搞定Vue3中使用vue-router相关的知识,希望对你有一定的参考价值。

在 Vue Router API 从 v3(Vue2)到 v4(Vue3)的重写过程中,大部分的 Vue Router API 都没有变化,但是在迁移你的程序时,你可能会遇到一些破坏性的变化。本文将使用v4体验新的API。

new Router 变成 createRouter

Vue Router 不再是一个类,而是一组函数。现在抛弃 new Router(),改成调用 createRouter函数

//v3
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  routes
})

//v4
import { createRouter } from 'vue-router'
const router = createRouter({
  // ...
})

废除了mode选项配置

新的history配置取代旧的 mode选项

v3:
mode:默认`hash模式`
使用mode选项指定路由渲染模式

v4:
mode的选项已被更换为更为灵活的`history选项`
每一个模式都由从vue-router导出的函数一一对应

对应关系如下:

  • history — createWebHistory
  • hash — createWebHashHistory
  • abstract — createMemoryHistory

所以V4后创建路由实例将变成如下:

`/*router/index.js*/`
//这里使用history模式举例
import { createRouter, createWebHistory } from 'vue-router'
export const constantRoutes = [
  {
    path'/',
    component() => import('@/views/home/index.vue'),
    meta: {
      title'首页'
    }
  },
  ...
]
export const router = createRouter({ 
  history: createWebHistory(),
  routes: constantRoutes
})
//将创建好的路由实例导出
export default router

建议:以后创建路由表引入路由采用懒加载路由的方式,这样打包的时候文件大小会变得小些。

component: () => import('@/views/home/index.vue')

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

//使用链式.use(...) eg:.use(store)等等
createApp(App).use(router).mount('#app')

取消(*)通配符路由

这种v3使用的路由匹配方式在v4已不适用了

{
  // 会匹配所有路径
  path'*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path'/user-*'
}

现在必须使用自定义的 regex 参数来定义所有路由(*、/*)

{
  path'/404',
  name'404',
  component() => import('@/views/error-page/404.vue'),
  meta: {
    title'404'
  }
},
{
  path'/:pathMatch(.*)',
  redirect'/404'
},

<keep-alive>写法变更

v3中路由缓存页面是通过<keep-alive>包组件包住路由组件<router-view>达到页面数据缓存的效果

//v3
<keep-alive v-if="$route.meta.keepAlive">
  <router-view></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></
router-view>

v4中,component是vue中的特殊组件,:is是用来绑定指定组件,这里是与路由对应的页面绑定

//v4
<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component"  v-if="$route.meta.keepAlive"/>
  </keep-alive>

  <component :is="Component"  v-if="!$route.meta.keepAlive"/>
</router-view> 

新增useRoute、useRouter

假定我们在路由表中定义这么一个用户详情组件,那么我在用户详情页该如何去获取路由中用户的Id呢?

{
  path'/user/:id',
  name'userDetail',
  component() => import('@/views/userDetail/index.vue'),
  meta: {
    title'用户详情'
  }
}

这时「useRoute」就派上用场了,我们可以在userDetail组件上从vue-router引入这个函数进来

<template>
  <div>
    用户id为:{{id}}
  </div>

</template>
<script>
import { useRoute,useRouter } from 'vue-router'
export default {
  setup() {
    const { params: { id } } = useRoute()
    return { id }
  }
}
</
script>
一文搞定Vue3中使用vue-router

当然想看下useRoute和useRouter有什么内容我们可以直接将方法挂在到浏览器上:

window.route = useRoute() window.router = useRouter()

这样我们在浏览器控制台输入router就能看到内容了一文搞定Vue3中使用vue-router可以看到useRouter()里面包含了路由的实例,跟V3的this.$router是一样的,v3我们写编程式路由是这样的:

this.$router.push('/login')

如今我们跳转路由是通过引入useRouter函数获取路由的实例方法

import { useRoute,useRouter } from 'vue-router'
export default {
  setup() {
    const router = useRouter()
    router.push('/login')
  }
}

useRoute又是什么东东?一文搞定Vue3中使用vue-router里面包含的是当前路由信息,通过它可以获取到传参信息等。