vue-Router 路由(恒定路由)
最编程
2024-04-22 07:07:48
...
1、安装
pnpm i vue-router
2、新建文件:src/routes.ts
import { RouteRecordRaw } from 'vue-router'
export const constantRoute: RouteRecordRaw[] = [
{
//
path: '/',
redirect: '/login',
},
{
//
path: '/login',
component: () => import('@/views/Login/index.vue'),
name: 'Login',
meta: {
title: '登录',
},
},
{
//登录成功展示数据的页面 main.vue
path: '/layout',
component: () => import('@/layout/index.vue'),
name: 'layout',
meta: {
title: 'layout',
},
},
{
path: '/404',
component: () => import('@/views/404/index.vue'),
name: '404',
meta: {
title: '404',
},
},
{
// 任意路由(无效或者不存在的路径 跳转至404)
path: '/:pathMatch(.*)*',
component: () => import('@/views/404/index.vue'),
name: 'Any',
meta: {
title: '任意',
},
},
]
3、新建文件:src/index.ts
import { createRouter, createWebHashHistory } from 'vue-router'
import { constantRoute } from './routes'
const router = createRouter({
history: createWebHashHistory(),
routes: constantRoute,
// 滚动行为
scrollBehavior() {
// ...
return {
left: 0,
top: 0,
}
},
})
export const setupRouter = (app: any) => {
app.use(router)
}
export default router
4、main.ts 引入
// 路由
import { setupRouter } from './router'
// 创建实例
const setupAll = async () => {
const app = createApp(App)
await setupRouter(app)
app.mount('#app')
}
setupAll()
5、app.vue 中加入代码
以上完成 ,输入不同路径就可以跳转到对应页面了。
上一篇: [Leetcode] 使用队列实现堆栈
下一篇: [编译原理] 03 语法分析
推荐阅读
-
带你进入互联网协议第六版(IPv 6) 第 2 章 IPv6 技术简介 2.3 IPv6 功能(II)-2.3.3 改进的路由选择
-
常见网络设备:集线器、网桥、交换机、路由器、网关
-
Cisco PT 模拟器-交换路由器基本配置命令
-
计算机网络 - Dijkstra 的路由算法
-
华为单臂路由的配置
-
在 ESXi8 下安装 iStoreOS 软路由器暨 Light NAS 系统
-
让软路由器开机自启动!
-
2.5 Java 全栈开发前端 + 后端(全栈工程师进阶路径) - 前端框架 VUE3 - 基础 - Vue 路由 - 程序化路由
-
互联网路由协议 - I. 内部网关协议 RIP
-
Flutter 配置路由组件提取和页面传递参数