// Vue 2
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes // short for `routes: routes`
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

// Vue 3
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'

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

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

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

// Route with param
{ path: '/user/:id', component: User }

// Access in component
this.$route.params.id // Vue 2
import { useRoute } from 'vue-router'
const route = useRoute()
route.params.id // Vue 3

// Programmatic navigation
this.$router.push('/about') // Vue 2
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/about') // Vue 3

// With params
this.$router.push({ name: 'user', params: { id: 123 } })

{ path: '/user/:id', name: 'user', component: User }

// Navigate by name
this.$router.push({ name: 'user', params: { id: 123 } })

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ]
  }
]

// Global
router.beforeEach((to, from, next) => { /* ... */ })

// Per-route
{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => { /* ... */ }
}

// In-component
export default {
  beforeRouteEnter(to, from, next) { /* ... */ },
  beforeRouteUpdate(to, from, next) { /* ... */ },
  beforeRouteLeave(to, from, next) { /* ... */ },
}

{ path: '/home', redirect: '/' }
{ path: '/about', alias: '/info' }

const Foo = () => import('./Foo.vue')

// /search?q=vue
this.$route.query.q // Vue 2
route.query.q // Vue 3 (with useRoute)

<router-link to="/about">About</router-link>
<router-link :to="{ name: 'user', params: { id: 123 } }">User</router-link>

<router-link to="/" active-class="my-active-class" exact-active-class="my-exact-active-class">Home</router-link>

// Vue 2
new VueRouter({
  mode: 'history', // or 'hash'
  routes
})

// Vue 3
createRouter({
  history: createWebHistory(), // or createWebHashHistory()
  routes
})

const router = new VueRouter({
  routes,
  scrollBehavior (to, from, savedPosition) {
    return savedPosition || { x: 0, y: 0 }
  }
})

{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound } // Vue 3
{ path: '*', component: NotFound } // Vue 2

{ path: '/admin', component: Admin, meta: { requiresAuth: true } }

// Use in navigation guard
if (to.meta.requiresAuth) { /* ... */ }