Complete steps to use vue-router in vue3

Preface

Managing routing is an essential feature for most single-page applications. With the new version of Vue Router in alpha stage, we can already start to see how it works in the next version of Vue.

Many of the changes in Vue3 will slightly alter the way we access plugins and libraries, and that includes Vue Router.

1. Step 1: Install vue-router

npm install [email protected]

2. Step 2: main.js

Let's first compare the difference between main.js in vue2 and vue3: (the first one is vue2, the second one is vue3)

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

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

3. 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: 'App',
  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 routing is needed (equivalent to $route and $router in vue2)

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

Example: Page jump

<template>
  <h1>I am test1</h1>
  <button @click="toTest2">toTest2</button>
</template>
<script>
import { useRouter } from 'vue-router'
export default {
  setup () {
    const router = useRouter()
    const toTest2= (() => {
      router.push("./test2")
    })
    return {
      toTest2
    }
  },
}
</script>
<style scoped>
</style>

Summarize

This is the end of this article about vue3 using vue-router. For more relevant content about vue3 using vue-router, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!