JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<div id="app">
  <h1>Hello Vue Router App!</h1>
  <p>
    <!-- use the router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
    
<router-link to="/about" v-slot="{ navigate }">
  <span role="link">About Us</span>
</router-link>

  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <section>
    <router-view></router-view>
  </section>
  
</div>

CSS

#app {
  margin: 1rem;
}

p > a{
  margin-right: 1rem;
}

section {
  border: 1px solid #000;
  padding: 10px;
}

JavaScript

const Home = { template: '<div>This is Home Page.</div>' }
const About = { template: '<div>This is About Page.</div>' }


const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]


const router = VueRouter.createRouter({

  history: VueRouter.createWebHashHistory(),
  routes, // short for `routes: routes`
})


// 5. Create and mount the root instance.
const app = Vue.createApp({});

app.use(router);
app.mount('#app');