import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    //...
  ],
})

// 路由配置
const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // 只有经过身份验证的用户才能创建帖子
        meta: { requiresAuth: true }
      },
      {
        path: ':id',
        component: PostsDetail
        // 任何人都可以阅读文章
        meta: { requiresAuth: false }
      }
    ]
  }
]

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      // 如果通过上一页/下一页按钮进行导航
      // 则页面会通过 savedPosition 保留之前的位置
      return savedPosition
    } else {
      // 如果没有位置记录，默认就是滚动到页面顶部
      return{ left: 0, top: 0 }
    }
  }
})

// 路由规则
const routes = [
  {
    path: '/user/:username',
    name: 'user'
    component: User
  },
]

<template>
  <router-link :to="{ name: 'user', params: { username: 'ben' }}">
    User
  </router-link>
</template>

router.push({ name: 'user', params: { username: 'ben' } })

// 路由配置
const routes = [
  {
    path: '/',
    component: Homepage,
    alias: '/home'
  }
]

const routes = [
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      // 为这 3 个 URL 呈现 UserDetails
      // 假设 URL 采用的参数是 24
      {
        path: 'profile', // （完全匹配） /users/24/profile
        component: UserDetails,
        alias: [
          '/:id', // 匹配 /24
          '' // 匹配 /users/24
        ] },
    ],
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      // 对应于多个组件
      components: {
        // 默认 `<router-view>` 对应的组件
        default: Home,
        // 这时 ES6 对象属性的缩写，相当于 LeftSidebar: LeftSidebar
        // 属性名与 `<router-view>` 上的 `name` 属性匹配
        LeftSidebar,
        RightSidebar,
      },
    },
  ],
})

<template>
  <router-view class="view left-sidebar" name="LeftSidebar"></router-view>
  <router-view class="view main-content"></router-view>
  <router-view class="view right-sidebar" name="RightSidebar"></router-view>
</template>

<template>
  <div>
    <h1>User Settings</h1>
    <NavBar />
    <router-view />
    <router-view name="helper" />
  </div>
</template>

// 相应的路由配置
{
  path: '/settings',
  component: UserSettings,
  // 嵌套路由
  children: [
    {
      path: 'emails',
      component: UserEmailsSubscriptions
    },
    {
      path: 'profile',
      // 命名视图
      components: {
        default: UserProfile,
        helper: UserProfilePreview
      }
  }]
}

// 路由配置
const routes = [
  {
    path: '/home',
    redirect: '/'
  },
  // 重定向的目标也可以是一个命名的路由
  {
    path: '/home',
    redirect: { name: 'homepage' }
  }，
  {
    // 该动态路由可以实现重定向
    // 例如从路由 /home/hello 重定向到 /home?q=hello
    path: '/home/:searchText',
    redirect: route => {
      // 方法接收当前的路由作为参数
      // return 重定向的字符串路径/路径对象
      return { path: '/home', query: { q: route.params.searchText } }
    }
  },
]

// 将 import UserDetails from './views/UserDetails'
// 替换成以下形式，以动态导入组件
const UserDetails = () => import('./views/UserDetails')
const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

const router = createRouter({
  routes: [{ path: '/:articleName', component: Article }],
})

router.addRoute({ path: '/about', component: About })

router.replace(router.currentRoute.value.fullPath)

router.addRoute('admin', { path: 'settings', component: AdminSettings })

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})

// 路由配置对象，传递给 `createRouter`
const routes = [
  // 组件 User 对所有用户进行渲染
  // 但用户 username 不同，动态段以冒号开始，作为路径参数
  {
    path: '/user/:username',
    component: User
  },
  {
    path: '/user/:username/posts/:postId'
    component: Post
  }
]

// User 组件
const User = {
  template: '<p>User {{ $route.params.username }}</p>',
}
// Post 组件
const Post = {
  template: `
    <p>User {{ $route.params.username }}</p>
    <p>Post {{ $route.params.postId }}</p>
  `
}

const routes = [
  // 匹配以 `/user-` 开头之后的所有内容，并将其放在路径参数 afterUser 中
  // 即可以通过 `$route.params.afterUser` 进行访问
  {
    path: '/user-:afterUser(.*)',
    component: UserGeneric
  },
  // 匹配路径的所有内容，将并将其放在路径参数 pathMatch 中
  // 即可以通过 `$route.params.pathMatch` 进行访问
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: NotFound
  },
]

this.$router.push({
  name: 'NotFound',
  params: { pathMatch: ['not', 'found'] },
})

<template>
  <router-link to="/home">Home Page</router-link>
</template>

<a href="/home">Home Page</a>

const navigationResult = await router.push('/home')
if (navigationResult) {
  // 导航被阻止
} else {
  // 导航成功 (包括重新导航的情况)
}

router.beforeEach((to, from) => {
  ...
})

// 通过全局解析守卫，获取目的路由的 meta 元信息
// 该路由的元信息有 requiresCamera 选项（布尔值）表示跳转的页面需要使用设备摄像机
router.beforeResolve(async to => {
  if (to.meta.requiresCamera) {
    try {
      // 可以在路由守卫中先尝试获取访问设备摄像机的权限
      await askForCameraPermission()
    } catch (error) {
      // 如果无法获取权限就取消导航
      if (error instanceof NotAllowedError) {
        // ...
        return false
      } else {
        // 意料之外的错误，取消导航并把错误传给全局处理器
        throw error
      }
    }
  }
})

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

// 路由配置
const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
      // reject the navigation
      return false
    },
  },
]

import { useRouter, useRoute } from 'vue-router'
export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    function pushWithQuery(query) {
      router.push({
        name: 'search',
        query: {
          ...route.query,
        },
      })
    }
  },
}

import { useRoute } from 'vue-router'
export default {
  setup() {
    const route = useRoute()
    const userData = ref()
    // 监听路径参数，更改时获取用户信息
    watch(
      () => route.params,
      async newParams => {
        userData.value = await fetchUser(newParams.id)
      }
    )
  },
}

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
export default {
  setup() {
    // 与 beforeRouteLeave 相同，但无法访问 `this`
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm(
        'Do you really want to leave? you have unsaved changes!'
      )
      // 取消导航并停留在同一页面上
      if (!answer) return false
    })
    const userData = ref()
    // 与 onBeforeRouteUpdate 相同，但无法访问 `this`
    onBeforeRouteUpdate(async (to, from) => {
      //仅当 id 更改时才获取用户
      if (to.params.id !== from.params.id) {
        userData.value = await fetchUser(to.params.id)
      }
    })
  },
}

<template>
  <a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
    <slot />
  </a>
  <router-link
    v-else
    v-bind="$props"
    v-slot="{ isActive, href, navigate }"
    custom
  >
    <a
      v-bind="$attrs"
      :href="href"
      @click="navigate"
      :class="isActive ? activeClass : inactiveClass"
    >
      <slot />
    </a>
  </router-link>
</template>
<script>
import { RouterLink, useLink } from 'vue-router'
export default {
  name: 'AppLink',
  props: {
    // 如果使用 TypeScript，请添加 @ts-ignore
    ...RouterLink.props,
    inactiveClass: String,
  },
  setup(props) {
    const { route, href, isActive, isExactActive, navigate } = useLink(props)
    // 添加 isExternalLink 属性，以判断链接是否指向外部，结合 CSS 可以在页面实现外部链接和内部链接的的不同样式显式
    const isExternalLink = computed(
      () => typeof props.to === 'string' && props.to.startsWith('http')
    )
    return { isExternalLink, href, navigate, isActive }
  },
}
</script>

const User = {
  // 组件设置 props 接收路由传递进来的数据
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: true
    },
    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项
    {
      path: '/user/:id',
      components: {
        default: User,
        sidebar: Sidebar
      },
      props: {
        default: true,
        sidebar: false
      }
    }
  ]
})

// 路由配置对象
const routes = [
  {
    path: '/promotion/from-newsletter',
    component: Promotion,
    // 对象模式
    props: { newsletterPopup: false }
  }
]

// 路由配置对象
const routes = [
  {
    path: '/search',
    component: SearchUser,
    props: route => ({ query: route.query.q })
  }
]