首页 > 资讯 > 前端开发 > JavaScript >Vue3的vue-router超详细使用示例教程

127

分享到

Vue3的vue-router超详细使用示例教程

Vue3的vue-router使用 Vue3使用vue-router Vue3 vue-router 2022-12-15 12:12:53 127人浏览八月长安

摘要

目录搭建vue3环境Vue-router入门（宝宝模式）vue-router基础（青年模式）一。动态路由匹配1.带参数的动态路由匹配2.捕获所有路由或404 Not Found路由二

搭建vue3环境

我们使用vite来搭建vue3环境(没有安装vite需要去安装vite)

npm create vite routerStudy

在命令行选择

请添加图片描述

cd routerStudy
npm i
npm run dev

环境搭建成功！！

vue-router入门（宝宝模式）

下载vue-router

npm i vue-router@4

新建以下文件
src/components/File1.vue：

<template>
    <div>
        这是文件一
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

src/components/File2.vue：

<template>
    <div>
        这是文件二
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

在src下新建router文件夹
在router文件夹下新建router.ts:

import { createRouter,createWEBHistory,createWebHashHistory } from 'vue-router'
import File1 from '../components/File1.vue'
import File2 from '../components/File2.vue'

const routes = [
    {
        path: '/',
        component:File1
    },
    {
        path: '/file2',
        component:File2
    }
]

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

export default router;

修改src/main.ts

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

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

修改src/components/HelloWorld.vue:

<script setup lang="ts">

</script>

<template>
    <router-view/>
    <button><router-link to="/">去文件一</router-link></button>
    <button><router-link to="/file2">去文件二</router-link></button> 
</template>

<style scoped>
</style>

点击按钮能够切换成功则使用成功

请添加图片描述

vue-router基础（青年模式）

一。动态路由匹配

1.带参数的动态路由匹配

当我们需要对每个用户加载同一个组件，但用户id不同。我们就需要在vue-router种使用一个动态字段来实现，再通过$routr.params来获取值：

请添加图片描述

我们用具体实例来实现一下：

（1）修改src/router/router.ts:

import { createRouter,createWebHistory,createWebHashHistory } from 'vue-router'
import File1 from '../components/File1.vue'
import File2 from '../components/File2.vue'

const routes = [
    {
        path: '/',
        component:File1
    },
    {
        path: '/file2/:username/abc/:userid', //注意看这个
        component:File2
    }
]

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

export default router;

（2）修改组件HelloWorld.vue:

请添加图片描述

(3) 修改组件File2.vue：

<template>
    <div>
        这是文件二
    </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'

const instance  = getCurrentInstance() 
if (instance != null) {
    const _this = instance.appContext.config.globalProperties //vue3获取当前this
    
onMounted(() => {
    console.log(_this.$route.params)
  })
}
</script>

<style scoped>

</style>

（4）点击去文件二按钮

请添加图片描述

（5）查看控制台

请添加图片描述

2.捕获所有路由或404 Not Found路由

当用户在导航栏乱输一通后，路由表中没有对应的路由，这时候，就需要将用户转去404页面。那么
我们该如何处理呢？

(1)修改router/router.ts:

import { createRouter,createWebHistory,createWebHashHistory } from 'vue-router'
import File1 from '../components/File1.vue'
import File2 from '../components/File2.vue'
import NotFound from '../components/NotFound.vue'
import UserGeneric from '../components/UserGeneric.vue'
const routes = [
    {
        path: '/',
        component:File1
    },
    {
        path: '/file2/:username/abc/:userid',
        component:File2
    },
    // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
    {
        path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound
    },
    // 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下
    {
        path: '/user-:afterUser(.*)', component: UserGeneric
    },
]

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

export default router;

(2)新建组件NotFound.vue:

<template>
    <div>
        糟糕！页面没有找到。。。呜呜呜
    </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'

const instance  = getCurrentInstance() 
if (instance != null) {
    const _this = instance.appContext.config.globalProperties //vue3获取当前this
    
onMounted(() => {
    console.log(_this.$route.params)
  })
}
</script>

<style scoped>

</style>

(3)修改HelloWorld.vue

(4)点击去404页面按钮（或者在地址栏乱写一通）

(5)出现404页面，说明运行成功！！！

二。嵌套路由

路由是可以嵌套的。例如：

嵌套的理解挺简单的，我就不多叭叭了，直接上代码，看完就懂了。
（1）新建组件Children1.vue:

<template>
    <div>
        我是孩子1
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

（2）新建组件Children2.vue:

<template>
    <div>
        我是孩子2
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

<template>
    <div>
        我是孩子2
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

(3)修改router/router.ts：

import { createRouter,createWebHistory,createWebHashHistory } from 'vue-router'
import File1 from '../components/File1.vue'
import File2 from '../components/File2.vue'
import NotFound from '../components/NotFound.vue'
import UserGeneric from '../components/UserGeneric.vue'
import Children1 from '../components/Children1.vue'
import Children2 from '../components/Children2.vue'



const routes = [
    {
        path: '/',
        component: File1,
        
    },
    {
        path: '/file2',
        component: File2,
        children: [  //使用嵌套路由
            {
                path: 'children1',
                component:Children1
            },
            {
                path: 'children2',
                component:Children2
            },
        ]
    },
    {
        path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound
    },
    {
        path: '/user-:afterUser(.*)', component: UserGeneric
    },
]

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

export default router;

（4)修改组件HelloWorld.vue：

(5)修改组件File2.vue：

<template>
    <div>
        这是文件二
        <div>
            我是文件二里的内容
            <router-view/>
            <button><router-link to="/file2/children1">找孩子1</router-link></button>
            <button><router-link to="/file2/children2">找孩子2</router-link></button>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

(6)先点去文件二，再点击找孩子1按钮，出现即成功！！

请添加图片描述

三。编程式导航

除了使用/< router-link/> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

1.router.push()方法的使用

(1)修改组件NotFound.vue:

<template>
    <div>
        糟糕！页面没有找到。。。呜呜呜
    </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'

const instance  = getCurrentInstance() 
if (instance != null) {
    const _this = instance.appContext.config.globalProperties //vue3获取当前this


    // 1.字符串路径
    _this.$router.push('/file2/children2')

    // 2.带有路径的对象
    // _this.$router.push({path:'/file2/children2'})

    // 3.命名的路由，并加上参数，让路由建立 url
    // _this.$router.push({name:'file2',params:{username:'children2'}})

    // 4.带查询参数，结果是 /reGISter?plan=private
    // _this.$router.push({ path: '/file2/children2', query: {userid:'123'} })


    onMounted(() => {
    console.log(_this.$route.params)
  })
}
</script>

<style scoped>

</style>

(2)再点“去404页面”,发现没有去404页面了，说明编程式导航成功！！

2.router.replace()方法的使用

它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。

修改组件NotFound.vue：

<template>
    <div>
        糟糕！页面没有找到。。。呜呜呜
    </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'

const instance  = getCurrentInstance() 
if (instance != null) {
    const _this = instance.appContext.config.globalProperties //vue3获取当前this

    // 一。router.push的使用： 
    // 1.字符串路径
    // _this.$router.push('/file2/children2')

    // 2.带有路径的对象
    // _this.$router.push({path:'/file2/children2'})

    // 3.命名的路由，并加上参数，让路由建立 url
    // _this.$router.push({name:'file2',params:{username:'children2'}})

    // 4.带查询参数，结果是 /register?plan=private
    // _this.$router.push({ path: '/file2/children2', query: {userid:'123'} })

    // 二。router.replace的使用：
    _this.$router.replace('/file2/children1')


    onMounted(() => {
    console.log(_this.$route.params)
  })
}
</script>

<style scoped>

</style>

3.router.go()方法的使用

修改组件NotFound.vue：

<template>
    <div>
        糟糕！页面没有找到。。。呜呜呜
    </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'

const instance  = getCurrentInstance() 
if (instance != null) {
    const _this = instance.appContext.config.globalProperties //vue3获取当前this

    // 一。router.push的使用： 
    // 1.字符串路径
    // _this.$router.push('/file2/children2')

    // 2.带有路径的对象
    // _this.$router.push({path:'/file2/children2'})

    // 3.命名的路由，并加上参数，让路由建立 url
    // _this.$router.push({name:'file2',params:{username:'children2'}})

    // 4.带查询参数，结果是 /register?plan=private
    // _this.$router.push({ path: '/file2/children2', query: {userid:'123'} })

    // 二。router.replace的使用：
    // _this.$router.replace('/file2/children1')

    // 三。router.go的使用：
    _this.$router.go(-1)  //相当于点击回退一次

    onMounted(() => {
    console.log(_this.$route.params)
  })
}
</script>

<style scoped>

</style>

到此这篇关于Vue3的vue-router超详细使用的文章就介绍到这了,更多相关Vue3的vue-router使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue3的vue-router超详细使用示例教程

本文链接: https://www.lsjlt.com/news/174948.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue3的vue-router超详细使用示例教程

目录搭建vue3环境vue-router入门（宝宝模式）vue-router基础（青年模式）一。动态路由匹配1.带参数的动态路由匹配2.捕获所有路由或404 Not Found路由二...

99+

2022-12-15

Vue3的vue-router使用 Vue3使用vue-router Vue3 vue-router
一篇超详细的Vue-Router手把手教程

目录1，router-view2，router-link3，重定向redirect4，路由别名5，路由传参props5.1，布尔模式5.2，对象模式5.3，函数模式6，路由守卫6.1...

99+

2022-11-12
vue3中使用swiper的完整版教程(超详细!)

目录介绍使用方式总结介绍在 vue3 中使用 swiper, 实现轮播图的效果；如果组件样式等模块引入不当，很有可能导致，页面无效果；或者想要的箭头或者切换效果异常问题。具体使用方...

99+

2023-05-15

Vue3使用swiper vue3使用swiper vue中如何使用swiper
vue中使用vuex的超详细教程

目录一、适合初学者使用，保存数据以及获取数据二、模块化（适合有部分基础的人）vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件...

99+

2022-11-13

vue使用vuex vue vuex
vue3中使用vuex和vue-router的详细步骤

目录vuex 安装使用步骤index.js文件main.js文件组件中使用vuexvue-router安装基本配置index.jsmain.jsvue3中路由的使用axio...

99+

2022-12-08

vue3使用vuex vue3使用vue-router
react-router-dom v6 使用详细示例

目录一、基本使用二、路由跳转2.1 Link 组件2.2 NavLink 组件2.3 编程式跳转三、动态路由参数3.1 路径参数路径匹配规则兼容类组件3.2 search 参数四、嵌...

99+

2022-11-13
Vue3 中路由Vue Router 的使用实例详解

目录前言：一、什么是 Vue Router ？二、路由的使用1、路由的安装2、路由的模式3、创建路由模块4、声明路由链接和占位符三、路由的重定向和别名四、嵌套路由五、声明式和编程式导...

99+

2023-02-18

Vue3 路由Vue Router使用 Vue Router使用
SecureCRT的使用超详细教程

目录下载和安装简单的介绍如何使用一、SecureCRT的使用二、SecureFX的使用使用乱码下载和安装 SecureCRT和SecureFX的下载和安装我这里就不多说了，详细的安装...

99+

2022-11-12
pyautogui库的使用教程(超详细)

一、前言 PyAutoGUI 让您的 Python 脚本控制鼠标和键盘以自动与其他应用程序交互。官方文档：PyAutoGUI documentation 常用函数列表函数名功能基本pyautogui.size()返回包含分辨率...

99+

2023-09-01

python
C++ 超详细示例讲解list的使用

目录一、list的介绍list的介绍二、list的使用2.1 list的构造函数2.2 list迭代器的使用2.3 list相关的容量大小相关的函数2.4 list数据的访问相关的函...

99+

2022-11-13
TortoiseSVN安装使用教程（超详细）

TortoiseSVN：（俗称小乌龟）Subversion版本控制系统的一个免费开源客户端，可以超越时间的管理文件和目录。文件保存在中央版本库，除了能记住文件和目录的每次修改以外，版本库非常像普通的文件服务器。你可以将文件恢复到过去...

99+

2023-08-20

服务器 linux apache TortoiseSVN
vue3中的透传attributes教程示例详解

目录引言绑定样式对象数组透传的attributes透传 attributes 之样式绑定透传 attributes 之事件绑定特殊1：组件嵌套特殊2：禁用透传attributes特殊...

99+

2022-11-13
超级详细的Vue安装与配置教程

目录一、下载和安装Vue二、创建全局安装目录和缓存日志目录三、配置环境变量 1. 环境变量---用户变量---选中Path---点编辑2. 环境变量---系统变量---新建...

99+

2022-11-13
idea离线使用jrebel的超详细教程

离线使用 JRebel 需要以下步骤：步骤 1: 下载 JRebel首先，你需要下载 JRebel 安装包。你可以从官方网站（htt...

99+

2023-08-11

idea
Wireshark零基础使用教程(超详细)

Wireshark 是一款开源的网络抓包工具，用于分析网络中的数据包。它可以帮助你深入了解网络通信过程，发现问题和解决网络故障。本教...

99+

2023-09-23

Wireshark
BurpSuite全套使用教程（超实用超详细介绍）

0x00 环境与安装 2021专业版推荐使用jdk11 BP : https://portswigger.net/Burp/Releases 注册机:https://github.com/h...

99+

2023-09-05

java jar 开发语言
vue-cli使用stimulsoft.reports.js的详细教程

vue-cli使用stimulsoft.reports.js（保姆级教程）第一部分：数据源准备以下是JSON数据的教程 json数据结构 { "数据源名":[...

99+

2022-11-12
Vue3实战学习配置使用vue router路由步骤示例

目录引言一、目录结构二、版本依赖三、配置路由四、使用路由引言随着Vue版本的升级，Vue 2.x项目和Vue 3.x项目在使用vue-router上有些区别，本文就简单介绍下vue...

99+

2022-11-13
超级详细的 FinalShell 安装及使用教程

一、引言 FinalShell 是一款免费的国产的集 SSH 工具、服务器管理、远程桌面加速的良心软件，同时支持 Windows,macOS,Linux，它不单单是一个 SSH 工具，完整的说法应该叫一体化的的服务器，网络管理软件，在很...

99+

2023-08-30

服务器 ssh 运维 linux 运维开发
TiggerRamDisk的超详细使用教程（亲测成功）

目录一、软件介绍（一）型号对应（二）可以支持的功能：二、操作步骤来源地址：https://blog.csdn.net/m0_52861000/article/details/129794781...

99+

2023-09-15

iphone ipad ios TiggerRamDisk 绕id