Vue-Router的学习实践

于 2024-05-15 14:20:16 发布
阅读量244 收藏 4
点赞数 5
文章标签： vue.js 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43218691/article/details/138907222
版权

Vue Router官方学习文档

第一节: 安装与配置

一、安装

npm安装 Vue-Router

npm:  npm install vue-router@4
yarn: yarn add vue-router@4
pnpm: pnpm add vue-router@4

image.png

二、配置

1、定义路由

  1. 在 src 目录下创建一个 router 文件夹放路由配置文件，在文件夹里创建 index.ts 文件
  2. 在 src 目录下创建 views 文件夹，在里面放组件页面

image.png

  1. 配置资源访问路径

第一步: 打开 tsconfig.json 配置文件，在/* Linting */下添加

// tsconfig.json 文件

"baseUrl": ""，
"paths": {
  "@/*": [ "src/*" ]，
}

image.png
第二步: 在 vite.config.ts 添加配置

// vite.config.ts

resolve: {
  // 设置文件./src路径为 @
  alias: {
    '@': resolve(__dirname， 'src') // 设置@指向src目录
  }
}，

image.png
第三步: 如果报错找不到path以及相关声明

npm install @types/node --save-dev

image.png

  1. 定义路由并创建路由实例进行全局挂载
// router/index.ts
import { createRouter， createWebHistory，RouteRecordRaw} from "vue-router";
// 1、定义路由 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [
    // 可直接导入或者引入
    {
        path: '/'， 
        component: () => import("@/views/home/index.vue")，
    }，
    {
        path: '/about'， 
        component: () => import("@/views/About/index.vue")，
    }
]

// 2、创建路由实例并传递routes
const router = createRouter({
    // 路由的模式：  vue2:
    // vue2 mode  history | vue3  createWebHistory
    // vue2 mode  hash    | vue3  createWebHashHistory
    history: createWebHistory()，  
    routes
})

// 导出
export default router

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

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

如遇到错误: 找不到该模块或其相应的类型声明
① 首先在src目录下创建一个vite-env.d.ts的文件
② 在文件中引入这些代码

/// <reference types="vite/client" />
// 配置这个文件是 解决错误：找不到模块“@/views/login/index.vue”或其相应的类型声明。ts(2307)
// 这段代码告诉 TypeScript，所有以 .vue 结尾的文件都是 Vue 组件，可以通过 import 语句进行导入。这样做通常可以解决无法识别模块的问题。

declare module '*.vue' {
    import { Component } from 'vue'; const component: Component; export default component;
}

2、router-view

将显示与 URL 对应的组件。你可以把它放在任何地方，以适应你的布局。
现在我们想开启项目显示 Home ，我们就需要在 APP.vue 添加 router-view

<template>
  <div>
    <h1>Home</h1> // 显示与 URL 对应的组件
  </div>
</template>

<script setup>

</script>

<style scoped>
</style>

image.png

3、router-link

使用 router-link 来进行导航，其相当于一个带有 href 属性的 a 标签。它是通过 to 来制定路径。

<template>
  <div>
    <router-link to="/about">go About</router-link>
    

    <router-link to="/">go Home</router-link>
    

    <router-view />
  </div>
</template>

<script setup></script>

<style scoped></style>

image.png

第二节: 动态路由

1、动态路由

在日常开发中，我们可以用动态路由实现点击不同的文章进入到相关的文章详情页面；在路由配置时，使用一个动态字段来实现，称之为路径参数。

  1. 创建页面组件article

image.png

  1. 添加/article/:id的动态路由
// router/index.ts

const routes: Array<RouteRecordRaw> = [
  // 可直接导入或者引入
  {
    path: '/',
    component: () => import('@/views/home/index.vue'),
  },
  {
    path: '/about',
    component: () => import('@/views/about/index.vue'),
  },
  {
    // 动态字段以：开始 这里就是id
    path: '/article/:id',
    component: () => import('@/views/article/index.vue'),
  },
];

像article/101,article/102等这些url都会进入这个路由组件中。

  1. 点击这两个路由都可以进入我们的article组件中。在我们article组件中可以通过$route.params来获取我们传的id参数。
    1. 在这种使用情况下，组件重复使用肯定是比卸载再创建高效多，所以此组件的生命周期是无效的，我们要监听其参数的变化，就可以来监听$route.params。
<template>
  <div>
    <router-link to="/about">go About</router-link>
    

    <router-link to="/">go Home</router-link>
    

    <router-view />
    


    <router-link to="/article/A">查看A文章详情</router-link>
    

    <router-link to="/article/B">查看B文章详情</router-link>
  </div>
</template>

<script setup></script>

<style scoped></style>

image.png

2、匹配404 Not found路由

当我们想匹配所有路径的路由，使用正则表达式来匹配URL

const routes: Array<RouteRecordRaw> = [
  // 可直接导入或者引入
  {
    path: '/',
    component: () => import('@/views/home/index.vue'),
  },
  {
    path: '/about',
    component: () => import('@/views/about/index.vue'),
  },
  {
    // 动态字段以：开始 这里就是id
    path: '/article/:id',
    component: () => import('@/views/article/index.vue'),
  },
  {
    path: '/:pages(.*)*', // 使用正则表达式来匹配URL （.*）表示可以匹配任何数量的任何字符 *表示前面的元素（.*）可以出现零次或多次
    component: () => import('@/views/notfound/index.vue'),
  },
];

<router-link to="/not/page/notfound">进入404页面</router-link>
<router-link to="/not">进入404页面1</router-link>

image.pngimage.png

第三节: 路由的匹配语法

1、sensitive 与 strict 路由配置

sensitive: 主要控制路由匹配是否大小写敏感,默认情况下,路由匹配是不区分大小写的，即路径中的大写和小写字符都被视为相同。如果将Sensitive设置为true，那么路由匹配将变得大小写敏感，这意味着路径中的大写和小写字符将被视为不同，需要精确匹配。
Strict： 则控制路由的路径最后是否包含斜线（/），即是否进行严格匹配。默认情况下，路由匹配是非严格的，也就是说，路径最后是否包含斜线并不会影响匹配结果。如果将Strict设置为true，那么路由匹配将变得严格，要求路径最后必须包含斜线才能进行匹配。

// router/index.ts  
{
  path: '/names',
  sensitive: true, // 此匹配项将变得大小写敏感.大小写被视为不同，需要精确匹配。
  component: import('@/views/notFont/index.vue'),
},
{
  path: '/user/',
  strict: true, // 此匹配项将要求路径最后必须包含斜线才能进行匹配。
  component: import('@/views/user/index.vue'),
},

<!-- 错误写法将进不去匹配路由页面 -->
<router-link to="/Names">路由小写 我错误 path写法 ：小写 Sensitive为true </router-link>
<router-link to="/names">路由小写 我正确 path写法 小写 Sensitive为true </router-link>
<!-- 错误写法将进不去匹配路由页面 -->
<router-link to="/user">路由有斜杠 错误写法： 我无斜杠 Strict 为 true</router-link>
<router-link to="/user/">路由有斜杠 我正确写法： 我有斜杠 Strict 为 true</router-link>

2、可选参数

可以通过使用 ? 修饰符(0 个或 1 个)将一个参数标记为可选,即为可有可无：

// router/index.ts  
{
  // 动态字段以：开始 这里就是id, id参数非必须(?)
  path: '/article/:id?',
  component: () => import('@/views/article/index.vue'),
},

image.pngimage.png

第四节: 嵌套路由

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如：
image.png

//  router/index.ts 页面
// 嵌套路由
{
  // 动态字段以：开始 这里就是id, id参数非必须(?)
  path: '/article/:id?',
    component: () => import('@/views/article/index.vue'),
    children: [
    // 如果想要打开此页面直接看见articleOne, 可以加一个空的嵌套路径
    // { path: '', component: () => import('@/views/article/articleOne.vue') },
    { path: 'articleOne', component: () => import('@/views/article/articleOne.vue') },
    { path: 'articleTwo', component: () => import('@/views/article/articleTwo.vue') },
  ]
},

// App.vue
<router-link to="/article">查看文章详情</router-link>
<router-link to="/article/articleOne">to articleOne</router-link>
<router-link to="/article/articleTwo">to articleTwo</router-link>

<!-- user/index.vue -->
<template>
  <div>
    <h1>这是id为{{$route.params.id}}的文章详情</h1>
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script setup>

</script>

<style scoped>
</style>

image.png
image.pngimage.png

第五节: 命名路由和编程式导航

一、命名路由

除了 path 之外，你还可以为任何路由提供 name。这有以下优点：

  • 没有硬编码的 URL
  • params 的自动编码/解码。
  • 防止你在 url 中出现打字错误。
  • 绕过路径排序
{
  path: '/article/:id?',
  name: 'article',
  component: () => import('@/views/article/index.vue'),
},

<!--  App.vue -->  
<router-link :to="{ name: 'article', params: { id: '12' } }">通过命名式进入article路由页面</router-link>

image.png

二、编程式导航

声明式导航：通过点击链接实现导航的方式，叫做声明式导航
例如：普通网页中的 链接 或 vue 中的** **
编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航。借助Router的实例方法来实现

1、导航到不同位置

<!-- App.vue -->
<template>
  <div class="flex">
    <button @click="toPages">通过编程式式进入article路由页面</button>
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const toPages = () => {
  router.push('/article/12')
  // router.push({name:'user',params:{id:'12'}})
  // router.push({path:'/user',query:{id:'12'}})
}
</script>

image.png

  1. push的参数可以是一个字符串路径也可以是一个对象。
// 一个字符路径
router.push('/article/12');
// 带有路径的对象
router.push({ path: '/article/12' });
// 命名的路由，并加上参数，让路由建立url
router.push({ name: 'article', params: { id: '12' } });
// 带查询参数， 结果是 /article?id=12
router.push({ path: '/article', query: { id: '12' } });
// 带hash,结果是/article#12
router.push({ path: '/article', hash: '12' });
  1. 路由传参方式区别: query、params
  • query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效
  • query 在路由配置不需要设置参数或者写为可选?，而 params 必须设置
  • query 传递的参数会显示在地址栏中，** 只能接受对象** 。
  • 使用params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;如果要用params进行传参， 使用动态传参, 刷新不丢失同query作用一致。(当浏览器刷新的时候，路由的实例会重新创建，会对地址栏上的地址做劫持,如果参数在地址栏上则不会丢失)

2、替换当前位置

它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。
也可以直接在传递给 router.push 的 to 参数中增加一个属性 replace: true ：

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

<router-link :to="..." replace> 
// 相当于
router.replace(...)

3、横跨历史

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)。

// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

4、篡改历史

router.push、router.replace 和 router.go 是 window.history.pushState、window.history.replaceState 和 window.history.go 的翻版，它们确实模仿了 window.history 的 API。
无论在创建路由器实例时传递什么 history 配置，Vue Router 的导航方法 (push、replace、go) 都能始终正常工作。

第六节: 命名视图

有些时候，我们需要在一个组件里，展示多个路由视图，而不是嵌套显示。命名视图可以让我们实现一个组件中具有多个路由渲染出口，这对很多布局很有用，例如一般系统的首页（侧导航、主内容）。
如果 router-view 没有设置名字，那么默认为 default。

// router/index.ts
{
	path: '/nameView',
	components:{  // 命名视图: 注意：component 改为 components
		default: () => import("@/views/home.vue"), //  默认路由
		one: () => import("@/views/user/userOne.vue"),
		two: () => import("@/views/user/userTwo.vue"),
	}
},

<template>
  <router-view></router-view>
  <!-- 命名视图 -->
  <router-view name='one' />
  <router-view name='two' />
</template>

image.png

第七节: 重定向和路由别名

一、重定向

路由重定向就是将此路由 (‘/article’ ) 配置到想要进入的路由 (‘article/articleOne’ ) 使用redirect
分为三种写法: 字符串形式、对象形式、函数形式

1、字符串形式

// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
// 1、定义路由 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [
  // 可直接导入或者引入
  {
    path: '/',
    component: () => import('@/views/home/index.vue'),
  },
  {
    path: '/article',
    redirect: '/articleOne'   // 路由/user重定向到 /userOne   
    // 可以省略 component 配置，因为它从来没有被直接访问过，所以没有组件要渲染。
  },
  {
    path: '/articleOne',
    component: () => import('@/views/article/articleOne.vue'),
  },
];
// 2、创建路由实例并传递routes
const router = createRouter({
  // 路由的模式：  vue2:
  // vue2 mode  history | vue3  createWebHistory
  // vue2 mode  hash    | vue3  createWebHashHistory
  history: createWebHistory(),
  routes,
});
export default router;

可以省略 component 配置，因为它从来没有被直接访问过，所以没有组件要渲染。但在嵌套路由里，如果一个路由记录有 children 和 redirect 属性，它也应该有 component 属性。

<template>
  <div class="flex">
    <button @click="toPages">重定向</button>

    <router-view />
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const toPages = () => {
    router.push({ path: '/article' });
  };
</script>

<style scoped>
  .flex {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
</style>

image.png

2、对象形式

// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
// 1、定义路由 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [
  // 可直接导入或者引入
  {
    path: '/',
    component: () => import('@/views/home/index.vue'),
  },
  {
    path: '/article',
    redirect: { path: '/articleOne' }   // 路径对象   
    //  redirect: { name: 'articleOne' }  命名对象
  },
  {
    path: '/articleOne',
    name: 'articleOne',
    component: () => import('@/views/article/articleOne.vue'),
  },
];
// 2、创建路由实例并传递routes
const router = createRouter({
  // 路由的模式：  vue2:
  // vue2 mode  history | vue3  createWebHistory
  // vue2 mode  hash    | vue3  createWebHashHistory
  history: createWebHistory(),
  routes,
});
export default router;

3、函数形式

// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
// 1、定义路由 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [
  // 可直接导入或者引入
  {
    path: '/',
    component: () => import('@/views/home/index.vue'),
  },
  {
    path: '/article/:id',
    redirect: (to) => {
      return {
        path: '/articleOne',
        query: {q:to.params.id}  // 传参
      }
    }
  },
  {
    path: '/articleOne',
    name: 'articleOne',
    component: () => import('@/views/article/articleOne.vue'),
  },
];
// 2、创建路由实例并传递routes
const router = createRouter({
  // 路由的模式：  vue2:
  // vue2 mode  history | vue3  createWebHistory
  // vue2 mode  hash    | vue3  createWebHashHistory
  history: createWebHistory(),
  routes,
});
export default router;

二、路由别名

路由别名就是 为URL为 ‘/’ 的路由起别名为 ‘/article’ ，虽然我访问的URL是 ‘/article’ ,但是它真正访问的还是 ‘/’ 匹配的组件。
他与路由重定向的区别在于： 路由重定向就会访问重定向后匹配的路由，而别名还是会访问原本匹配的路由。
我们使用：alias来进行路由别名的配置。

// router/index.ts
{
  path: '/articleOne',
  name: 'articleOne',
  component: () => import('@/views/article/articleOne.vue'),
  alias:['/article1', '/articleYi']  // 定义/user 别名为 ： /user1,/userIndex
}

第八节: 路由传参

1、query路由传参

router.push({ path: '/user', query: { 
  name: '张全蛋',
  age: 18,
  hobby: '吃饭'
})

2、params路由传参

// router/index.ts
{
  // params传参必须在路由配置设置占位符参数，添加了一个:id占位符，就传递一个为id的参数。这里添加了两个id和type
  path: '/article/:id/:type',
  name: 'article',
  component: () => import('@/views/article/index.vue'),
},

router.push({ name: 'article', params: { id: 12345, type: 'game' } })

3、params和query的区别

  • query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效
  • query 在路由配置不需要设置参数，而 params 必须设置占位符参数(传递的参数也会在地址栏中显示)
  • query 传递的参数会显示在地址栏中， 只能接受对象
  • params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变(当浏览器刷新的时候，路由的实例会重新创建，会对地址栏上的地址做劫持。如果参数在地址栏上则不会丢失)

第九节: 导航守卫

:::tips

  1. 全局导航守卫
    1. vue.router.beforeEach 全局的前置导航守卫
    2. vue.router.afterEach 在路由跳转完成后调用的钩子函数
    3. vue.router.beforeResolve 所有的守卫和异步路由解析之后才会进行调用
  2. 路由独享的守卫
    1. vue.router.beforeEnter
  3. 组件内的守卫
    1. vue.router.beforeRouterEnter 在组件渲染创建之前进行调用
    2. vue.router.beforeRouterUpdate 在路由发生改变，并且该组件进行复用时才会被调用
    3. vue.router.beforeRouterLeave 在离开组件时进行调用
      :::

第十节:不同的历史模式

1、Hash模式

  1. 特点
    1. URL中包含符号"#"

在 Hash 模式下，URL 中始终包含一个以"#“为前缀的部分。例如：http://example.com/#/home。这个”#"号是 Hash 模式的显著标志。

  2. Hash不包括在HTTP请求中

与传统的服务端路由不同，Hash 不会被包括在 HTTP 请求中。换句话说，在进行路由切换时，不会向服务器发送额外的请求。这使得前端能够完全掌控路由的变化。

  3. 页面切换不触发完整页面的重新加载

一个显著的特点是，在 Hash 模式下，页面的切换不会导致完整页面的重新加载。仅仅通过改变 URL 中的 Hash 部分，前端可以实现页面内容的动态更新，这有助于提供更流畅的用户体验，特别适用于单页面应用（SPA）。

  1. 实现原理
    1. 利用 window.onhashchange 事件监听 hash 值的变化
    2. 当 URL 的 hash 发生变化时，触发 hashchange 事件
  2. 示例代码
const router = new VueRouter({
  mode: 'hash'，	// 指定使用 Hash 模式， vue-router 的默认模式
  routes: [
    { path: '/'， component: Home }，
    { path: '/about'， component: About }
    // 更多路由配置
    ]
})

2、History模式

  1. 特点
    1. URL 更规范，不包含"#"
    2. 基于 HTML5 的新特性，通过 history.pushState() 和 replaceState() 修改历史记录栈

History 模式是基于 HTML5 的新特性而来的。通过使用 history.pushState() 和 replaceState() 这两个 API，我们可以在不重新加载页面的情况下修改浏览器的历史记录栈，从而改变当前地址栏的 URL。

  3. 在使用 History 模式时，确保服务器配置正确，以便在直接访问页面时能够正确路由到对应的页面。如后端没有配置对应的路由处理，则会返回404错误。
  1. 实现原理
    1. 利用 history.pushState() 和 replaceState() API 操作实现 URL 的变化
    2. 通过监听 popstate 事件来捕获 URL 的变化

为了捕获到 URL 的变化并进行相应的页面跳转和渲染，我们需要监听 popstate 事件。

  3. 示例

const router = new VueRouter({
  mode: 'history'，
  routes: [
    { path: '/'， component: Home }，
    { path: '/about'， component: About }
    // 更多路由配置
  ]
})

3、两者区别

  1. 形式上
    :::info
  • Hash 模式：URL 包含“#”。例如：http://example.com/#/home。
  • History 模式：URL 更规范，不包含“#”。例如：http://example.com/home。
    :::
  1. 功能上
    :::info
  • Hash 模式：适用于单页应用，通过在 URL 中的 Hash 部分进行路由切换。
  • History 模式：需要服务器支持，更适用于传统多页应用，通过 HTML5 的新特性实现页面切换。(动态加载路由)
    :::
  1. 原理上
    :::info
  • Hash 模式：
    1. 利用 window.onhashchange 事件监听 hash 值的变化
  • History 模式：
    1. 通过监听 popstate 事件来捕获 URL 的变化
    2. 利用 history.pushState() 和 replaceState()修改历史记录栈
      :::
终生耕田
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue_Router路由
weixin_44999951的博客
05-31 355
安装vue-router cnpm install vue-router --save-dev 在node_modules目录中可以找到 vue-router 说明安装成功了 安装完运行报错因为可能是router版本太高了，先用cnpm install vue-router@3.1.3 --save-dev命令再运行。 创建文件和组件 在src目录下创建router文件夹，在里边创建index.js，Vue运行时会自动扫描router目录下的index.js文件 index.js //引入依赖包 impo
Vue3+Ts+Vite项目(第五篇)——配置router，实现路由跳转并完成路由模块化
做笔记/记录遇到的前端bug
07-09 6383
Vue3+TypeScript+Vite项目中，手摸手带你完成在Vue3项目中使用vue-router，并完成vue-router的模块化拆分
vue3项目搭建 基于vite + typescript + vue-router + pinia
无
08-24 1057
vue3项目搭建 基于vite + typescript + vue-router + pinia
【Vue Router】strict 和 sensitive 的区别
zhengh513的博客
07-19 1201
默认情况下，所有路由是不区分大小写的，并且能匹配带有或不带有尾部斜线的路由。Tips：当前路由上的配置会覆盖全局。
pnpm+vue3+vite+pinia+router框架搭建
CycleByle的博客
02-10 353
pnpm+vue3+vite+pinia+router框架搭建
【Vue.js】路由基础-动态路由、嵌套路由、编程式导航、重定向
LuWeien的博客
03-02 7418
当我们点击outer-link的时候路由就发生改变了，然后就会去路由表里面找对映的是哪个path，找到对应的path就去找对应的组件，将对应的组件放入router-view里面。这里的vue3是通过CDN方式引入, 由于地址在国外可能会比较慢, 可以将代码复制到本地去引入, 注意这个网站有的cdn使用不了(可以往下找使用旧一点版本)这个网站里面有大量的国内镜像资源, cdn是内容分发网络, 可以进入网站直接复制链接浏览器打开将源码复制下来在本地使用, 和vue的本地引入是一样的道理。
vue（typescript）的安装和配置路由
qianOye的博客
05-25 304
6.打开被挂载的app.vue文件上，通过<router-view></router-view>1.命令行输入pnpm install vue-router@4，等待安装。2.然后在项目中创建router文件，再创建一个xx.ts文件来配置路由。4.创建两个vue测试一下,ps：路径要跟第三步中的路径一致。这个访问的是“/test”的test.vue。5.在main.js中导入路由配置文件。3.刚创建的xx.ts文件里面如下写入。这个访问的是“/”的home.vue。7.启动项目，查看效果。
vue3学习笔记：vue-router（上）
weixin_55730337的博客
08-30 1263
假设我们要跳转 /user/:id 这个路由，在组件创建的时候会携带id这个参数发送到后端获取用户的详细数据。那么，一旦满足这个匹配规则就会发送一次请求到后端。但是我们心知肚明，我们的id是一个纯数字，如果路径变成了 /user/李四 ，我们就应该知道这是一个错误的路径。这种情况我们可以给参数设置一个正则表达式，只有满足正则表达式的路径参数才能够访问到正确的组件。给参数设置正则表达式。routes: [//只匹配纯数字的路径参数},//匹配所有内容})
Vite3搭建Vue3项目
weixin_43148062的博客
11-24 1867
pnpm + vite3 + vue3 + vue-router4 + pinia + axios + eslint + prettier + husky + lint-staged + git-cz
Vue3-28-路由-大小写敏感 与 严格匹配
northcastle的博客
12-27 926
vue3 的路由配置中，配置路由的大小写敏感和 路径严格匹配
使用pnpm+vite创建vue
xiao_cheng_的博客
04-27 3725
(踩坑中……) 目录一、创建项目步骤二、vite使用记录1、vite使用eslint2、vite 使用sass，不需要安装sass-loader：3、vite使用mock:4、vite使用axios5、vite使用vue-router6.使用pinia7.使用pinia-plugin-persist 一、创建项目步骤 没得axios/vueRouter，啥都要自行安装 pnpm安装：https://blog.csdn.net/xiao_cheng_/article/details/124247953 p
vite构建vue3+Ts项目 并配置路由router
最新发布
ZHENGCHUNJUN的博客
02-27 2484
找不到模块“@/views/About.vue”或其相应的类型声明，这个警告说明 Vue Router 没有找到与路径 "/src/views/About" 匹配的路由。Vue Router 的路径匹配是基于配置的路由路径而不是实际文件路径。对于 Vue 3，Vue Router 是一个单独的库，因此你需要安装它作为项目的依赖。的文件夹，然后在该文件夹中创建一个名为。能够正确地映射到对应的组件，确保路由的。中确保路由的配置是正确的，，用于显示当前路由对应的组件。
vue-router教程合并
wang535956800的博客
09-16 1105
截取vue-router教程，目的是为了更方便回顾
Vite+pnpm构建Vue3+TypeScript+vue-class-component+Vue router+pinia+ESLint（prettier）+sass
GIS小虫的博客
06-14 3127
RT
vue-router
小K只是男孩纸
10-17 385
{path:'/o/:orderId'}, //匹配/o/3549{path:'/p/:productName'}.//匹配/o/books]偶尔还可以这样写path : '/:orderId(\\d+)' } // 仅匹配数字 {path : '/:productName' } //匹配任何内容 ]
vue-router路由导航url已改变，但未跳转至对应组件
mmsmsmm的博客
08-25 3649
vue-router路由导航url已改变，但未跳转至对应组件
vue-router 模块化封装使用
FOR.GET
02-17 1867
先简单的记录，之后有时间再详细描述 简单使用 安装 pnpm install vue-router@4 创建router文件夹，并包括以下几个文件 index.ts 文件是用于将modules文件夹的文件路由结构，并加载至routes里面 import { createWebHistory, RouteRecordRaw } from 'vue-router'; import { createRouter } from 'vue-router'; // 使用vite中的globEage.
pnpm + vue3.0 + vite + pinia + vueuse 搭建前端项目
发果叁
06-08 5106
使用 npm 安装 注意：node 的版本号。安装 pnpm，node 的版本号不能小于 V14.19.0查看 nvm 现在使用的 node 版本号。 使用 nvm 安装 node 14.19.0 版本 ，安装完毕之后切换到此版本中，最好关闭之后再切。 输入项目名 选择一个框架 使用 typescript 5.启动项目 集成配置 为保证 node 的使用 修改 3.代码质量风格的统一 集成 eslint 安装 创建配置文件： 创建忽略文件： 命令行式运行
Vue2.0 Vue-router入门教程与实践指南
1. **Vue.use(VueRouter)**：这是将Vue Router作为全局组件进行注册的方法，允许我们在项目中使用路由功能。 2. **mode**：默认为`hash`，但推荐使用`history`模式，以提供整洁的URL（如`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值