Vue CLI How to use Vue Router

Vue CLI How to use Vue Router

# Create a new Vue project

vue create myapp

cd myapp

# start your app by running the following command

npm run serve

vue add router

C:\vuejs\myapp>vue add router

src/router/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 24 25 26 27 28 29 30 31 32 33 34

//src/router/index.js import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import Profile from '../views/Profile.vue' import Product from '../views/Product.vue'   const routes = [   {     path: '/',     name: 'Home',     component: Home   },   {     path: '/profile',     name: 'profile',     component: Profile,   },   { path: '/product/:id', component: Product },   {     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

src/App.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13

//src/App.vue <template>   <div id="nav">     <router-link to="/">Home</router-link> |     <router-link to="/about">About</router-link> |     <!--<router-link to="/profile">Profile</router-link> -->     <router-link :to="{ name: 'profile', params: { username: 'cairocoders' } }" > <!--router params -->       Profile     </router-link>  |     <router-link to="/product">Product</router-link>   </div>   <router-view/> </template>

src/main.js

?

1 2 3 4 5 6

//src/main.js import { createApp } from 'vue' import App from './App.vue' import router from './router'   createApp(App).use(router).mount('#app')

src/views/Product.vue

?

1 2 3 4 5 6 7 8 9

//src/views/Product.vue <template>     <div class="product">         Product Page     </div>     <span>         Looking for Product: {{ this.$route.params.id }}     </span> </template>

src/views/Profile.vue

?

1 2 3 4 5 6 7 8 9

//src/views/Profile.vue <template>     <div class="profile">         Profile Info     </div>     <span>         {{ this.$route.params.username }}     </span> </template>