import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  
]

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

export default router

// () => import('xxx') 表示路由拉加载，即访问这个路由才会加载这个资源
const routes: RouteRecordRaw[] = [
  { path: '/', component: Home },
  { path: '/about', component: () => import('../components/About.vue') }
]

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

createRouter(options: RouterOptions)

const routes: RouteRecordRaw[] = [
  { path: 'a', component: A },
  { path: 'b', component: B }
]

<template>
	<div>
    <h1>App 组件</h1>
    <RouterLink to='a'>a</RouterLink>
    <RouterLink to='b'>b</RouterLink>
    <RouterView />
  </div>
</template>

<template>
	<h2>A 组件</h2>
</template>

const routes: RouteRecordRaw[] = {
  { path: '/user/:id', component: User}
}

<template>
	<h2>id: {{ $route.params.id }}</h2>
</template>

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)
</script>

const routes = [
  // 表示 /:orderId 只匹配数字
  { path: '/:orderId(\\d+)' },
  // /:productName 匹配任何内容
  { path: '/:productName' }
]

const route = [
  { path: '/params/:paramsId*', component: Prams }
]

import { useRoute } from 'vue-router'
const route = useRoute()
cosnole.log(route.params)
// paramsId: ['2003', '03', '03']

const routes = [
  { path: '/users/:userId?' }
]

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 单独配置 sensitive
    { path: '/user/:id', sensitive: true }
  ],
  // 全局配置 strict
  strict: true
})

// App.vue
<template>
	<div>
    <h1>App 组件</h1>
    <RouterView />
  </div>
</template>

// Sons.vue
<template>
	<div>
    <h2>Sons 组件</h2>
    <RouterView />
  </div>
</template>

// Son.vue
<template>
	<div>
    <h3>我是 {{$route.params.id}} 儿子</h3>
  </div>
</template>

const routes = [
  {
    path: '/sons',
    component: Sons,
    // 使用 children 配置子路由
    children: [
      { path: '/sons/id(\\d+)', component: Son }
    ]
  }
]

const routes = [
  {
    path: '/user',
    name: 'user',
    component: User
  }
]

<RouterLink :to="{name: 'user'}">去 user 组件</RouterLink>

import { useRouter } from 'vue-router'
const router = useRouter()
router.push({
  name: 'user'
})

const routes = [
  { path: '/user/:username', component: User }
]

import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/user')

// 字符串路径
router.push('/user/2')
// 带有路径的对象
router.push({ path: '/user/2' })
// 命名路由，并加上 params 参数
router.push({ name: 'user', params: {
  username: 'xjj'
} })
// 携带查询参数
router.push({ path: '/user', query: {
  password: 'xxx'
} })
// 携带 hash(通常是目录定位)
// 结果是 /user#age
router.push({ path: '/user', hash: '#age' })

<RouterView name="LeftSideBar" />
<RouterView />
<RouterView name="RightSidebar"

const routes = [
  {
    path: '/',
    components: {
      default: Home,
      // 下面两个都是组件，简写形式
      LeftSidebar,
      RightSidebar
    }
  }
]

const routes = [
  // 从 `/` 重定向到 `/home`
  { path: '/', redirect: '/home' }
]

{ path: '/', redirect: { name: 'home' } }

{
  path: '/',
  redirect: to => {
    return { path: '/home', query: { q: to.params.pathText } }
  }
}

const routes = [
  {
    path: '/users/:id/posts',
    redirect: to => {
      return 'profile' // 或者 { path: 'profile' }
    }
  }
]

<router-link to="profile">去个人首页</router-link>

// 将 props 属性设置为 true
const routes = [
  { path: '/user/:id', component: User, props: true }
]

// User.vue
<script setup>
defineProps<{
  id: string
}>()
</script>
<template>
	<div>
    {{id}}
  </div>
</template>

const router = createRouter({ /**/ })
router.beforeEach((to, form) => {
  // 返回 false 即取消路由跳转
  return false
})

router.beforeEach((to, from) => {
  if(!isAuthenticated && to.name !== 'Login') {
    return { name: 'Login' }
  }
})

router.beforeResolve(async (to) => {
  if(to.meta.requireCamera) {
    try {
      await askForCameraPermission()
    } catch(error) {
      if(error instanceof NotAllowedError) {
        // ...处理错误
        return false // 取消导航
      } else {
        // 意料之外的错误，取消当行并传递给全局处理器
        throw error
      }
    }
  }
})

router.afterEach((to, from) => {
  sendToAnalytics(to.fullPath)
})

router.afterEach((to, from, failure) => {
  if (!failure) sendToAnalytics(to.fullPath)
})

const routes = [
  {
    path: '/users/:id',
    component: User,
    beforeEnter: (to, from) => {
      // reject he navigation
      return false
    }
  }
]

function removeQueryPrams(to) {
  if(Object.keys(to.query).length)
  	return { path: to.path, query: {}, hash: to.hash }
}
function removeHash(to) {
  if(to.hash) return {
    path: to.path,
    query: to.query,
    hash: ''
  }
}
const routes = [
  {
    path: '/users/:id',
    component: User,
    beforeEnter: [removeQueryParams, removeHash]
  }
]

<script>
onBeforeRouteUpdate((to, from) => {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
  // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
})
onBeforeRouteLeave((to, from) => {
  // 在导航离开渲染该组件的对应路由时调用
  // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
})
</script>

<RouterView v-slot="{ Component }">
	<transition name="fade">
  	<component :is="Componet" />
  </transition>
</RouterView>

const routes = [
  {
    path: '/left',
    component: Left,
    meta: { transition: 'slide-left' }
  },
  {
    path: '/right',
    component: Right,
    meta: { transition: 'slide-right' }
  }
]

<route-view v-slot="{ Component, route }">
	<transition :name="route.meta.transition || 'fade'">
  	<component :is="Component" />
  </transition>
</route-view>

router.afterEach((to, from) => {
  // 获取前往路由的数组长度(以 '/' 分隔)
  const toDepth = to.path.split('/').length
  // 同上
  const fromDepth = from.path.split('/').length
  to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left'
})

<router-view v-slot="{ Component, route }">
	<transition name="fade">
  	<component :is="Component" :key="route.path" />
  </transition>
</router-view>

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  scrollBehavior: (to, from, savedPosition) {
  	return /* 位置 */
	}
})

scrollBehavior(to, from, savedPosition) {
  return { top: 0 }
}

scrollBehavior(to, from, savedPosition) {
  return {
    el: '#main',
    top: -10
  }
}

scrollBehavior(to, from, savedPosition) {
  if(savedPosition) {
    return savedPosition
  }
  return {
    top: 0
  }
}

scrollBehavior(to, from, savedPosition) {
  if(to.hash) {
    return {
      el: to.hash
    }
  }
}

scrollBehavior(to, from, savedPosition) {
  if(to.hash) {
    return {
      el: to.hash,
      behavior: 'smooth'
    }
  }
}

scrollBehavior(to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ left: 0, top: 0 })
    }, 500)
  })
}

router.push('/my-profile')
closeMenu()

await router.push('/my-profile')
closeMenu()

const navigationResult = await router.push('/my-profile')
if(navigationResult) {
  // 导航被阻止
} else {
  // 导航成功，关闭菜单栏
  closeMenu()
}

import { NavigationFailureType, isNavigationFailure } from 'vue-router'

// 试图离开未保存的编辑文本界面
const failure = await router.push('/articles/2')

if (isNavigationFailure(failure, NavigationFailureType.aborted)) {
  // 给用户显示一个小通知
  showToast('You have unsaved changes, discard and leave anyway?')
}

await router.push('/my-profile')
if(router.currentRoute.value.redirectedFrom) {
  // redirectedFrom 是解析出的路由地址，就像导航守卫中的 to 和 from
}