Vue.js 3.0 Tutorial
Vue.js 3.0 Component Advanced
Vue.js 3.0 Transitions & Animations
Vue.js 3.0 Reusable & Combinable
Vue.js 3.0 Advanced
Vue.js 3.0 Tools
Vue.js 3.0 Scale
Vue.js 3.0 Accessibility
Vue.js 3.0 Migrating from Vue2
Vue.js 3.0 Contribute Documentation
Vue.js 3.0 API References
Vue.js 3.0 Style Guide
Vue 3.0 uses Vue Router for handling routing. To create a new Vue 3.0 project with Vue Router, follow these steps:
Step 1: Install Vue CLI if you haven't done so already.
npm install -g @vue/cli
Step 2: Create a new Vue project.
vue create my-project
When asked to pick a preset, choose "Manually select features". Make sure to select "Router" and "Choose Vue 3.x" when asked for a version.
Step 3: Navigate to your new project directory.
cd my-project
Step 4: Open the src/router/index.js file. This is where the routes for the application are defined.
A sample route configuration might look like this:
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
In this file, we import the createRouter and createWebHistory functions from vue-router. We also import the Home component. We then define an array of route objects. Each object has a path, a name, and a component property.
Finally, we create and export the router by calling createRouter, passing in an object with the application's route history and routes.
Step 5: Use the router in your Vue components. For example, in the App.vue file, you can define a navigation menu and a <router-view /> where the content for the current route will be displayed:
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view />
</div>
</template>
Step 6: Run your application:
npm run serve
Navigate to localhost:8080 in your browser (or the server address output in your terminal). You'll see the "Home" page, and you can navigate to the "About" page by clicking on the "About" link.