Vue-router之页面跳转

目录

1.Vue  Router

1.1Vue Router的简介

1.2安装

1.3创建路由器实例

2. router-link 页面跳转

2.1 .router-link简介

2.2使用路由对象的query属性进行传参

1.Vue  Router

1.1Vue Router的简介

官方文档见：https://router.vuejs.org/zh/introduction.htmlhttps://router.vuejs.org/zh/introduction.html

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

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

1.2安装

方式一：如果你是通过vue-cli脚手架来搭建项目，则在配置过程就会选择是否加载路由。

选择是（y），则后面下载依赖时会自动下载。

vue-cli脚手架来搭建项目的命令为：

npm create vue@latest

注意：示例版本为："vue": "^3.4.21"，"vue-router": "^4.3.0"

方式二：安装依赖包

命令为：

npm install vue-router@4

1.3创建路由器实例

路由器实例是通过调用 createRouter() 函数创建的：

具体代码：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
  ]
})

其中， createWebHistory() 是 Vue Router 提供的一种基于浏览器 history API 的路由模式，它使用了 HTML5 中的 history.pushState 和 history.replaceState 方法来实现路由跳转。这种模式可以使得 URL 更加直观，而且不会在 URL 中添加任何特殊字符。

例如：https://example.com/user/id

官方文档见：不同的历史模式 | Vue Router (vuejs.org)https://router.vuejs.org/zh/guide/essentials/history-mode.html

2. router-link 页面跳转

2.1 .router-link简介

<router-link> 是一个全局组件，它默认会被渲染成一个带有链接的a标签,router-link 定义了11给自定义属性，其中 to 属性指定链接地址。

to：

类型：string 类型或是 RouteLocationRaw（用户级别的路由位置）

默认值：to 为必填项

作用：当RouterLink 被点击后，它的值会被传递给router.push从而实现路由的切换。

实例：

<router-link to="/about">router-link跳转到about页面</router-link>

a标签和RouterLink的区别：如果直接使用a标签，则当用户点击链接实现跳转时，整个页面都会刷新一下；而使用RouterLink的目的为了实现 在不重新加载页面的情况下，更改URL，出URL的生成以及编码。

2.2使用路由对象的query属性进行传参

<template>
  <div>
     <router-link :to="{ path: '/about', query: { id: 11, name: 'zhangsan' } }">
router-link的带query跳转到about页面
     </router-link>
  </div>
</template>

其中，path:'/about'为路由路径，query中设置传递参数的数值，这样当用户点击链接后，不仅会导航到指定的路径（/about），还会将id和name作为查询参数附加到 URL 上。类似于'https：//localhost:8080/about?id=11&name=zhangsan'