Vue中路由的使用

落牧红尘

于 2024-07-15 11:12:49 发布

阅读量337

点赞数 19

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_75149710/article/details/140412330

版权

Vue中路由的使用

1.创建vue项目

打开文件管理器，选择一个路径，在地址栏输入cmd然后回车

弹出指令窗口然后输入以下指令按下回车

npm create vue@latest

输入项目名称

可选可不选这里我选择

是否引入单页面开发就是使不使用路由这个必须勾选

后面的就否了

创建完成

然后用编辑启打开它

2.清理原有文件

先将src引导文件删除保留至下面即可

3.导入组件

作为路由组件通常放在views这个目录下与写正常组件无异，这里直接将提前准备好的文件导入

4.配置路由

使用路由最关键的就是路径，所以这里要关注router/index.ts这个文件

打开这个文件我们先将他清空然后引入使用路由相关的依赖

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

然后引入我们的路由组件

import Home from '@/views/Home.vue'
import Insert from '@/views/Insert.vue'
import Update from '@/views/Update.vue'

然后我们需要创建一个常量来存储路径

const routes = [
  { path: '/', component: Home },
  { path: '/insert', component: Insert },
  { path: '/update/:id?', name: 'update', component: Update },
]

routes定义了应用中的所有路由及其相关配置。每个数组元素都是一个对象，代表一个路由规则。

path: 路由的路径，用于匹配URL。例如 '/' 匹配网站的根路径，'/insert' 匹配 /insert 路径。
component: 当路由匹配成功时渲染的组件。这里如 Home, Insert, 和 Update 应该是之前在Vue项目中定义的组件。
name: （可选）给路由命名，便于在其他地方引用，比如通过 name 而不是 path 来进行路由导航。
props: （未在示例中展示）可以配置如何将路由参数作为属性传递给组件。

注： 在update 路由中的 :id? 表示这是一个可选参数，URL中可以包含也可以不包含这个参数，这在需要根据ID更新资源但又想保持路由通用于无ID情况时很有用。

然后还需使用createRouter 函数构造一个routerd对象

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

createRouter 是Vue Router提供的一个函数，用于创建路由实例。它接收一个选项对象作为参数，这个对象中主要包含两部分内容：

history: 定义了路由的模式，如 createWebHistory() 表示使用HTML5的历史记录API（也就是常说的history模式），这允许使用前端路由而不会引起页面刷新。另一种常见模式是hash模式，通过createWebHashHistory()来创建。
routes: 就是我们上面提到的路由配置数组，定义了应用程序的所有路由规则。

最后使用下面这个语句将其暴露出去

export default router

接下来配置main.ts这个文件

在原有的基础上将上面配置好的router引进来

import router from './router'

然后添加

app.use(router)

最后main.ts如下

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')