上一篇文章講了vue3+vue-cli4x如何創(chuàng)建項(xiàng)目 傳送門

vue-router@next文檔 該文檔暫時(shí)還沒有中文

現(xiàn)在我們來講一下vue3如何使用vue-router
打開剛剛創(chuàng)建的vue3+vue-cli4x項(xiàng)目的package.json文件可以看到?jīng)]有給我們提供vue-router,我們需要自己安裝

package.json

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

安裝完成

安裝完成

vue2和vue3的對(duì)比

創(chuàng)建文件夾

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

這里我們使用hash模式 需要history模式的同學(xué)請(qǐng)點(diǎn)擊這路由模式
這里方便演示我們?cè)?code>src文件夾下創(chuàng)建兩個(gè)頁面

創(chuàng)建頁面

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
  }
]

然后導(dǎo)出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')

到這里就完成了引入和掛載，現(xiàn)在來講一下如何在頁面中使用
打開login.vue
在html中添加一個(gè)按鈕并綁定一個(gè)點(diǎn)擊事件

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

接著我們?cè)陧撁嬷幸?code>router并使用

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

引入的useRoute,useRouter 相當(dāng)于vue2的 this.$route()，this.$router()
點(diǎn)擊按鈕就能跳轉(zhuǎn)到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>