当前位置：首页 > news >正文

Vue-router的引入和安装

news 2026/1/14 10:07:40

什么是Vue-Router？

Vue路由器是Vue.js的官方路由器，它与Vue.js核心深度集成，使用Vue轻松构建单页应用程序变得轻而易举。功能包括：

嵌套路线映射

动态路由

模块化，基于组件的路由器配置

路由参数，查询，通配符

查看由Vue.js过渡系统提供动力的过渡效果

细粒度的导航控制

带有自动活动CSS类的链接

HTML5历史记录模式或哈希模式

可自定义的滚动行为

网址的正确编码

路由的核心：改变Url，但页面不进行整体刷新，路由理解为指向

路由表，是一个映射表，一个路由就是一组映射关系。

形式: key : value key：表示路由 value：可为function（后台路由）或为 Component（组件）

安装：

直接下载 / CDN#

https://unpkg.com/vue-router@4

Unpkg.com 提供了基于 npm 的 CDN 链接。上述链接将始终指向 npm 上的最新版本。你也可以通过像 https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.js 这样的 URL 来使用特定的版本或 Tag。

npm

npm install vue-router@4

yarn

yarn add vue-router@4

安装成功后，会在package.json 中显示出来

使用例子：

一、创建一个文件夹router 新建一个js文件来进行路由集中管理

在新建一个views来存储组件

组件代码：

<template><div>这是Login组件</div>
</template>

app.vue首页

注意：

router-link#

请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

router-view#

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

<script setup></script><template><h1>Hello App!</h1><p><!--使用 router-link 组件进行导航 --><!--通过传递 `to` 来指定链接 --><!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签--><router-link to="/Login">Go to Home</router-link></p><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view>
</template><style></style>

在路由js进行配置

import {createRouter,createWebHashHistory }  from 'vue-router'// 1. 定义路由组件.
// 也可以从其他文件导入
import Login from '../views/Login.vue'// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [{ path: '/Login', component: Login },
]// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。history: createWebHashHistory(),routes, // `routes: routes` 的缩写
})//导出router
export  default  router;

在main.js 进行配置

vue-router带参的动态路由配置

新建一个路由

app.vue

如果想要这个参数显示出来要使用 $route

看看$route 这个里面包含着什么

可以看出从里面取得了链接等信息

在看看在组合api setup里怎么获取通过 import { useRoute } from 'vue-router'

<template><div>这是首页</div>
</template>
<script setup>import { useRoute } from 'vue-router'console.log(useRoute())
</script>