Vue

Project Setup & Run Commands

1. npm create vite@latest my-vue-app
2. npm install
3. npm run dev
4. npm run build
5. npm run preview
6. npm install vue-router

Vue

Props

1. ???
2. ???
3. ???
4. ???

// App.jsx
import { 
  BrowserRouter, 
  Routes, 
  Route, 
  Link 
} from "react-router-dom"
import Home from './components/Home';
import About from './components/About';

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  )
}
                

Vue

Routing

// router.js
import { 
  createRouter, 
  createMemoryHistory
} from 'vue-router'
import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView },
]

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

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'

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

// App.vue
<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>

  <router-view />
</template>