vue3中关于路由hash与History的设置

发布时间：2024/02/12

下面是关于Vue3中路由hash与History的设置的详细攻略：

1. 路由设置

在Vue3中使用路由需要先安装vue-router，使用以下命令进行安装：

npm install vue-router@4

1.1 history模式

如果使用history模式，则路由使用的是浏览器的history.pushState和history.replaceState方法，这样路由就是“干净”的URL，可以去除URL中的#符号，例如：

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

1.2 hash模式

如果使用hash模式，则路由使用的是浏览器的URL中的#符号，例如：

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

使用createWebHashHistory()方法来创建hash模式的路由。

2. 设置默认路由

设置默认路由可以让用户在没有输入路由路径时自动跳转到指定页面。

2.1 history模式下设置默认路由

在history模式下设置默认路由需要在路由最后添加一个{path: '*', redirect: '/'}的路由，例如：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
  // 设置默认路由
  {
    path: '*',
    redirect: '/',
  },
]

2.2 hash模式下设置默认路由

在hash模式下设置默认路由需要在路由最后添加一个`{path: '/'}，例如：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
  // 设置默认路由
  {
    path: '/',
  },
]

这里需要注意的是，hash模式下的默认路由不能使用redirect属性，因为hash路由不存在重定向问题。

示例说明

下面给出两个具体的示例：

示例1：使用history模式设置默认路由

// 引入Vue Router
import { createRouter, createWebHistory } from 'vue-router'

// 引入组件
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/about',
      name: 'About',
      component: About,
    },
    // 设置默认路由
    {
      path: '*',
      redirect: '/',
    },
  ],
})

// 导出路由
export default router

这个示例演示了如何使用history模式设置默认路由。

示例2：使用hash模式设置默认路由

// 引入Vue Router
import { createRouter, createWebHashHistory } from 'vue-router'

// 引入组件
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

// 创建路由实例
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/about',
      name: 'About',
      component: About,
    },
    // 设置默认路由
    {
      path: '/',
    },
  ],
})

// 导出路由
export default router

这个示例演示了如何使用hash模式设置默认路由。