VueRouter4 路由语法解析

import { createRouter, createWebHistory } from 'vue-router'

1 .导入createRouter，创建路由实例

2. 导入createWebHistory ，配置 history 模式，地址栏不带#。（ 配置hash模式用 createHashHistory， 地址栏带# ）

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})
export default router

import.meta.env.BASE_URL 是 vite.config.js中的 base 配置项。是部署应用时的基本URL

routes 和 vue2 一样

 然后在浏览器的地址栏就会显示。

如果不设置或者设置为'/' ,就是这样

在模板中点击跳转，和vue2一样

<button @click="$router.push('/home')">去首页</button>

如果写成点击触发一个函数，在函数中要这样写

import { useRoute, useRouter } from 'vue-router'
// 1. 获取路由对象
const route = useRoute()
// 2. 获取路由参数
const router = useRouter()
const goList = () => {
  console.log(route, router)
  router.push('/list')
}