Vue Router 也随着 Vue3 的更新来到了 4 版本，来看一下怎么使用吧！（这里使用的是 composition API 和 TypeScript 模式）
安装 vue-router4
npm install vue-router@4
在 /src 下新建 router/index.ts
import {
createRouter,
createWebHashHistory,
createWebHistory,
RouteRecordRaw
} from 'vue-router'
const routes:Array = [...]
const router = createRouter({
history: createWebHashHistory(),
/*
* 如果配置的是 createWebHashHistory 则浏览器地址栏所
* 显示的路径中会带有 "#" 号
* 如果使用 createWebHistory 则不会出现
*/
routes
})
export default router
routes 里面配置的是路由数组
以下是我的路由数组
const routes:Array = [
{
path: '/',
component: () => import('@/components/IndexPage.vue'),
},
{
path: '/login',
component: () => import('@/components/LoginPage.vue')
},
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('@/components/404.vue')
}
]
路径里的
@符代表src路径，可以参考以前的文章，最后一个路由的path内的内容表示未匹配的路径
配置子路由
{
path: '/',
component: () => import('@/components/IndexPage.vue'),
children: [
{
path: '/',
component: () => import('@/components/page/OneSubPage.vue')
},
{
path: '/two-sub-page',
component: () => import('@/components/page/TwoSubPage.vue')
}
]
},
这里给 IndexPage 下的页面放置了两个子页面，分别为 OneSubPage 和 TwoSubPage，配置子路由的方式基本和一级路由一样。
在 main.ts 中注册路由
main.ts 是我们整个项目的入口文件
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
createApp(App).use(router).mount('#app')
在 App.vue 中配置 router-view
这里只写了几个简单的页面来展示路由功能，具体代码就不放了 😐
测试路由
尝试下启动项目，并在浏览器打开：
默认的路径为 /，所进入的路由页面是 IndexPage -> OneSubPage
如果想进入当前一级路由的第二个子路由：
如果想进入另一个一级路由：
路由跳转
这里先简单展示一下一个路由跳转按钮的代码吧 💩
登录
import {useRouter} from 'vue-router';
// 定义路由器，负责路由跳转
const router = useRouter();
// 登录按钮：路由跳转
function login() {
router.push('/');
}
Original: https://www.cnblogs.com/hhsk/p/16733947.html
Author: HuStoking
Title: 简单上手 Vue Router
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/603800/
转载文章受原作者版权保护。转载请注明原作者出处！