How to use vue-router with Vue3?

Preface

Management routing is an essential feature for most single-page applications. With the new version of Vue Router in Alpha, we can already start seeing how it works in the next version of Vue.

Many of the changes in Vue3 will slightly change the way we access plugins and libraries, including Vue Router.

1. The first step: install vue-router

npm install vue-router@4.0.0-beta.13

2. The second step: main.js

First, let’s compare main.js in vue2 and vue3 Difference: (The first picture is vue2, the second picture is vue3)

It can be clearly seen that we commonly use it in vue2 The Vue object "disappears" in vue3 due to the direct use of the createApp method, but in fact the app created using the createApp method is a Vue object. Vue.use(), which is often used in vue2, can be used in vue3 Replace it with app.use() for normal use; in the main.js file of vue3, use vue-router to directly call the router using the app.use() method.

Note: The route name exported by the import routing file is from "corresponding routing file relative path", the project directory is as follows (vue2 and vue3 are the same):

三, routing file

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

const routes = [
    {
        path: '/',
        component: () => import('@/pages')             
    },
    {
        path: '/test1',
        name: "test1",
        component: () => import('@/pages/test1')   
    },
    {
        path: '/test2',
        name: "test2",
        component: () => import('@/pages/test2')   
    },
]
export const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

export default router

4. app.vue

<template>
  <router-view></router-view>
</template>

<script>

export default {
  name: &#39;App&#39;,
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4. Use (such as jump)

We introduce useRoute and useRouter where we need to use routing (equivalent to $route and $router in vue2)

<script>
import { useRoute, useRouter } from &#39;vue-router&#39;
export default {
  setup () {
    const route = useRoute()
    const router = useRouter()
    return {}
  },
}</script>

Example: Page jump

<template>
  <h2>我是test1</h2>
  <button>toTest2</button>
</template>
<script>
import { useRouter } from &#39;vue-router&#39;
export default {
  setup () {
    const router = useRouter()
    const toTest2= (() => {
      router.push("./test2")
    })
    return {
      toTest2
    }
  },
}
</script>
<style>
</style>

The above is the detailed content of How to use vue-router with Vue3?. For more information, please follow other related articles on the PHP Chinese website!