Vue3中路由的配置与使用

一、安装 vue-router

npm i vue-router -s
npm i vue-router --save

二、配置路由文件

src
  Ⅼrouter
    Ⅼroutes.js
    Ⅼindex.js

2-1 router/routes.js

配置一些路由规则

// router/routes.js
import TableCard from '../components/TableCard'
import TableCardDark from '../components/TableCardDark'

export default [
    {
        name: 'Light',
        path: '/data-table',
        component: TableCard
    },
    {
        name: 'Dark',
        path: '/data-table-d',
        component: TableCardDark
    }
]

2-2 router/index.js

主配置文件【简单配置一下】

import routes from './routes'
import {createRouter, createWebHistory} from 'vue-router'

export default new createRouter({
    history: createWebHistory(),
    routes,
})

三、其他组件使用 Router、Route

路由的时候，会有参数什的么，需要用到 Route；或者编程式路由什么的，需要用到 Router。
通过 useRoute、useRouter 两个API获取。

import {useRouter, useRoute} from 'vue-router'

export default {
  name: 'XXX',
  components: {xxx,xxx},

  setup(){
    const router = useRouter()
    const route = useRoute()
   }
}