vue3 + vue router

// main.js

1
2
3
4
5
6
7
import { createApp } from 'vue'
import App from './App.vue'
import { router } from './route'

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

// App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div id="root">
    <div id='nav'>
      <router-link to="/home"> GO HOME </router-link>
      <router-link to="/login"> GO LOGIN </router-link>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

// route/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { createRouter, createWebHistory } 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: createWebHistory(),
    routes: routes
})

// home.vue

1
2
3
4
5
6
7
8
9
10
<template>
  <p>home</p>
</template>
<script>
export default {

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

// login.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>