路由

从头开始实现一个简单的路由

• 如果你只需要一个简单的页面路由，而不想为此引入一整个路由库，你可以通过动态组件的方式，监听浏览器 hashchange 事件或使用 History API 来更新当前组件。

<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'
const routes = {
  '/': Home,
  '/about': About
}
const currentPath = ref(window.location.hash)
window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})
const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>
<template>
  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>

vue-router 路由模式有几种？

• 有 Hash 和 History 两种模式

• Hash: 使用URL的hash值来作为路由。支持所有浏览器。
• History: 以来HTML5 History API 和服务器配置。

vue-router有哪几种导航钩子？

• 有3种。
• 1、第一种是全局导航钩子：router.beforeEach(to,from,next)。作用是跳转前进行判断拦截。
• 2、第二种是组件内的钩子。
• 3、第三种是单独路由独享组件。

router-link上事件无效解决方法

• 使用 @click.native 。原因：router-link会阻止click事件，.native指直接监听一个原生事件。