1npm install vue-router
2

1import React from "react";
2import {
3  BrowserRouter as Router,
4  Switch,
5  Route,
6  Link,
7  useRouteMatch,
8  useParams
9} from "react-router-dom";
10
11export default function App() {
12  return (
13    <Router>
14      <div>
15        <ul>
16          <li>
17            <Link to="/">Home</Link>
18          </li>
19          <li>
20            <Link to="/about">About</Link>
21          </li>
22          <li>
23            <Link to="/topics">Topics</Link>
24          </li>
25        </ul>
26
27        <Switch>
28          <Route path="/about">
29            <About />
30          </Route>
31          <Route path="/topics">
32            <Topics />
33          </Route>
34          <Route path="/">
35            <Home />
36          </Route>
37        </Switch>
38      </div>
39    </Router>
40  );
41}
42
43function Home() {
44  return <h2>Home</h2>;
45}
46
47function About() {
48  return <h2>About</h2>;
49}
50
51function Topics() {
52  let match = useRouteMatch();
53
54  return (
55    <div>
56      <h2>Topics</h2>
57
58      <ul>
59        <li>
60          <Link to={`${match.url}/components`}>Components</Link>
61        </li>
62        <li>
63          <Link to={`${match.url}/props-v-state`}>
64            Props v. State
65          </Link>
66        </li>
67      </ul>
68
69      {/* The Topics page has its own <Switch> with more routes
70          that build on the /topics URL path. You can think of the
71          2nd <Route> here as an "index" page for all topics, or
72          the page that is shown when no topic is selected */}
73      <Switch>
74        <Route path={`${match.path}/:topicId`}>
75          <Topic />
76        </Route>
77        <Route path={match.path}>
78          <h3>Please select a topic.</h3>
79        </Route>
80      </Switch>
81    </div>
82  );
83}
84
85function Topic() {
86  let { topicId } = useParams();
87  return <h3>Requested topic ID: {topicId}</h3>;
88}
89

1//Implementation
2//main.js - Add below lines
3import VueRouter from 'vue-router';
4
5Vue.use(VueRouter);
6
7const router = new VueRouter({
8  routes,
9  mode: 'history'
10});
11
12new Vue({
13  router,
14  render: h => h(App)
15}).$mount('#app')
16
17//App.vue - Add below line in v-content
18/*
19<template>
20  <v-app>
21    <v-content>
22      <router-view></router-view>
23    </v-content>
24  </v-app>
25</template>
26*/
27
28//route.js - We need to craate file under src
29import linkName from './components/fileName.vue';
30export const routes = [
31  {
32    path: '/',
33    component: linkName
34  }
35]

1cd [project]
2npm install --save vue-router // install only on the project that we are in

1npm install --save vue-router
2
3//after installing vue-router in the project
4//go inside main.js in your project and add
5//(just after Vue.config.productionTip=false):
6
7Vue.use(VueRouter):
8
9const routes=[
10{path: '/home', component: [componentName]},
11{path: '/features', component: [componentName2]},
12.
13.
14.
15];
16//you can add  as many routes as you need
17
18//also add:
19
20const router=new VueRouter({
21routes,
22mode: 'history'
23});
24
25
26//to make the router accesible for all the project you need to add it inside the new Vue:
27
28new Vue({
29router,     <----
30.
31.
32}).$mount('#app')
33
34//to make different pages acoording to the route selected, add (inside app.vue):
35<template>
36   <div id="app">
37     <Navbar></Navbar>
38
39     <router-view> </router-view>  <----------
40     <Footer></Footer>
41   </div>
42</template>
43
44

1//<router-link :to="..."> is the equivalent of calling "router.push(...)"
2
3// literal string path
4router.push('home')
5
6// object
7router.push({ path: 'home' })
8
9// named route
10router.push({ name: 'user', params: { userId: '123' } })
11
12// with query, resulting in /register?plan=private
13router.push({ path: 'register', query: { plan: 'private' } })
14
15// go forward by 3 records
16router.go(3)
17
18// go back by 3 records
19router.go(-3)
20