vue3使用router

1、版本需要用4.x

npm install --save vue-router@4

2、

配置路由

router.js

import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"

const routes = [

  {

    path: '/test',

    component: () => import('../test/Test.vue'),

  },

]

const router = createRouter({

  // 采用hash 模式

  history: createWebHashHistory(),

  // 采用 history 模式

  // history: createWebHistory(),

  routes, //使用上方定义的路由配置

});

export default router

3 引入

main.js

import router from './router'

const app = createApp(App);

app.config.productionTip = false;

app.use(router)

app.mount('#app')

4、使用

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

export default {
  setup () {
    const route = useRoute()
    const router = useRouter()
    return {}
  },
}

引入的useRoute,useRouter 相当于vue2的 this.$route()，this.$router()

感觉还是vue2使用起来方便