Vue3Vue 路由模式（createWebHashHistory /createWebHistory ）和RouterLink写法

在Vue 3中，你可以使用vue-router库来管理你的应用路由。createWebHashHistory和createWebHistory是两种不同的路由模式。

1. createWebHashHistory: 使用URL的哈希部分来模拟一个完整的URL，它会在URL中添加一个#。这主要是为了兼容旧的浏览器和一些服务端渲染的场景。
2. createWebHistory: 使用现代的history.pushState API来管理路由，这种模式下，URL看起来更像是一个传统的网站路由。

例子代码：

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
 
// 使用 createWebHashHistory
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', component: Home },
    // 更多的路由规则...
  ],
});
 
// 使用 createWebHistory
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    // 更多的路由规则...
  ],
});

RouterLink和RouterView是vue-router中用于导航和显示与路由匹配的组件视图的两个核心组件。

例子代码：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
 
<router-view></router-view>

在这个例子中，RouterLink组件用于创建导航链接，to属性指定了链接的目的路径。RouterView组件是用来显示与当前URL匹配的视图的。