vue3如何使用vue-router

上一篇文章讲了vue3+vue-cli4x如何创建项目 传送门

vue-router@next文档 该文档暂时还没有中文

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

package.json

$ npm install vue-router@4.0.0-beta.13

安装完成

安装完成

vue2和vue3的对比

创建文件夹

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

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

创建页面

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

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

然后导出router

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

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

修改main.js

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>
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.js

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.js

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

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

const routes = [
  { 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>