vue3如何使用vue-router

现在我们来讲一下vue3如何使用vue-router。打开刚刚创建的vue3+vue-cli4x项目的package.json文件可以看到没有给我们提供vue-router,我们需要自己安装vue-router@next

$ npm install vue-router@4

我们在src下创建route文件夹和下面的index.ts

打开index.ts 引入router

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

这里我们使用hash模式 需要history模式的同学请点击这路由模式, 这里方便演示我们在src文件夹下创建两个页面

创建页面， 在router中注册

const home = () => import("../home")
const login = () => import("../login")

const routes: Array<RouteRecordRaw> = [   { path: "/", redirect: "/home" },   {     path: "/home",     name: "home",     component: home   },   {     path: "/login",     name: "login",     component: login   } ]

然后导出router

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

这里我们修改一下main.ts 方便我们使用

修改main.ts在main.ts中引入router 并挂载

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

const app = createApp(App)
app.use(router)
app.mount('#app')

到这里就完成了引入和挂载，现在来讲一下如何在页面中使用 打开login.vue, 在html中添加一个按钮并绑定一个点击事件

<template>
  <p>index</p>
  <button @click="toHome">toHome</button>
</template>

接着我们在页面中引入router并使用

<script lang="ts">
import { useRoute, useRouter } from 'vue-router'
export default {
  setup () {
    const route = useRoute()
    const router = useRouter()
    return {}
  },
}

引入的useRoute,useRouter 相当于vue2的 this.$route()，this.$router() 点击按钮就能跳转到home.vue页面了

import { useRouter } from 'vue-router'
export default {
  setup () {
    const router = useRouter()
    const toHome = (() => {
      router.push({
        name: 'home'
      })
    })
    return {
      toHome
    }
  },
}

下面是整体页面代码

main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { router } from './route'

const app = createApp(App)
app.use(router)
app.mount('#app')

route下的index.ts
import { createRouter, createWebHashHistory } from "vue-router"

const home = () => import("../home")
const login = () => import("../login")

const routes: Array = [
  { path: "/", redirect: "/home" },
  {
    path: "/home",
    name: "home",
    component: home
  },
  {
    path: "/login",
    name: "login",
    component: login
  }
]

export const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

login.vue
<template>
  <p>index</p>
  <button @click="toHome">toHome</button>
</template>
<script>
import { useRouter } from 'vue-router'
export default {
  setup () {
    const router = useRouter()
    const toHome = (() => {
      router.push({
        name: 'home'
      })
    })
    return {
      toHome
    }
  },
}
</script>
<style  scoped>
</style>

home.vue
<template>
  <p>home</p>
</template>
<script>
export default {

}
</script>
<style  scoped>
</style>