Vue3的vue-router超详细使用

news2024/11/19 11:16:55

从零开始搭建Vue3环境（vite+ts+vue-router），手拉手做一个router项目

  • 搭建vue3环境
  • vue-router入门（宝宝模式）
  • vue-router基础（青年模式）
    • 一。动态路由匹配
      • 1.带参数的动态路由匹配
      • 2.捕获所有路由或404 Not Found路由
    • 二。嵌套路由
    • 三。编程式导航
      • 1.router.push()方法的使用
      • 2.router.replace()方法的使用
      • 3.router.go()方法的使用

搭建vue3环境

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

npm create vite routerStudy

在命令行选择
在这里插入图片描述
请添加图片描述

cd routerStudy

npm i

npm run dev

环境搭建成功！！
在这里插入图片描述

vue-router入门（宝宝模式）

  1. 下载vue-router
npm i vue-router@4
  1. 新建以下文件
    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;
  1. 修改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')
  1. 修改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>
  1. 点击按钮能够切换成功则使用成功请添加图片描述

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>

(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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/409222.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

uniapp项目中引入vant-Weapp（局部全局都有 史上最详细的方法）

uniapp项目中引入vant-Weapp（局部全局都有 史上最详细的方法）

1.先在根目录创建wxcomponents文件夹 2.打开 https://github.com/youzan/vant-weapp 下载最新的vant-Weapp 3.把我们下好的文件vant-weapp里面只留下dist其余的可以全部删掉&#xff0c;然后把vant-weapp放到 wxcomponents里面 4.在App.vue引入vant样式 import /wxcomponents…
阅读更多...
蓝桥杯web开发-5道模拟题让你信心满满

蓝桥杯web开发-5道模拟题让你信心满满

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域新星创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…
阅读更多...
最好的Vue组件库之Vuetify的入坑指南（持续更新中）

最好的Vue组件库之Vuetify的入坑指南（持续更新中）

目录 安装Vuetify 文档结构 快速入门 特性 样式和动画 首先先声明&#xff0c;个人不是什么很牛逼的大佬&#xff0c;只是想向那些想入坑Vuetify的前端新手或者嫌文档太长不知如何入手的人提供一些浅显的建议而已&#xff0c;能让你们稍微少走一些弯路就是本文的目的。我其实也…
阅读更多...
『从零开始学小程序』媒体组件video组件

『从零开始学小程序』媒体组件video组件

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位喜欢写作&#xff0c;计科专业大三菜鸟 &#x1f3e1;个人主页&#xff1a;starry陆离 &#x1f552;首发日期&#xff1a;2022年9月15日星期四 如果文章有帮到你的话记得点赞&#x1f44d;收藏&#x1f497;支持一下哦 『…
阅读更多...
Vue结合高德地图实现HTML写自定义信息弹窗

Vue结合高德地图实现HTML写自定义信息弹窗

最近在写项目的时候有个需求就是根据点击地图上的点展示对应的信息&#xff0c;弹窗看着还挺花哨的。我在高德地图官网上还有各大平台找了如何自定义弹窗&#xff0c;可给出的大多数都是通过JS写HTML结构&#xff0c;我感觉这种不仅不好布局&#xff0c;而且可读性和维护性都不…
阅读更多...
客户端会话跟踪技术 Cookie 浅谈

客户端会话跟踪技术 Cookie 浅谈

文章目录前言为什么之前浏览器和服务器不支持数据共享&#xff1f;会话跟踪技术Cookie的概念Cookie的工作流程Cookie的基本使用Cookie原理分析Cookie的存活时间Cookie存储中文前言 用户打开浏览器&#xff0c;第一次访问 Web 服务器资源时&#xff0c;会话建立&#xff0c;直到…
阅读更多...
富文本编辑器Quill 介绍及在Vue中的使用方法

富文本编辑器Quill 介绍及在Vue中的使用方法

在Web开发中&#xff0c;富文本编辑器是不可或缺的一个功能组件&#xff0c;掌握少量基础语法就能让一篇文章实现较为不错的排版效果&#xff0c;即见即所得。 目前市场上已提供大量集成富文本编辑器的包&#xff0c;Quill 作为其中一个&#xff0c;以简单、易上手特点&#x…
阅读更多...
vue项目打包失败问题记录

vue项目打包失败问题记录

项目"vue": "^2.7.14"版本 起因&#xff1a;项目里安装了openlayers最新版本的地图插件&#xff0c;打包会成功&#xff0c;但是打包页面会有红色提示 刚开始根据红色提示百度找到相同错误的方法提供了的一系列提示安装啊&#xff0c;卸载&#xff0c;装了…
阅读更多...
【WebSocket 协议】Web 通信的下一步进化

【WebSocket 协议】Web 通信的下一步进化

标题【手动狗头&#x1f436;】&#xff0c;大佬轻饶 目录一、什么是 WebSocket ?二、WebSocket 应用场景?三、代码中的 WebSocket四、一个完美的案例&#xff1a;在线聊天程序实现服务器chat/index.js实现客户端chat/index.htmlchat/style.css最终效果WebSocket 是基于单个 …
阅读更多...
关于elementUI表单的清除验证以及复合型输入框

关于elementUI表单的清除验证以及复合型输入框

目录 一、清除表单的验证 问题的发生以及解决过程 代码 总结 二、复合型输入框——查询&#xff08;前置和后置都有的&#xff09; 问题的发生以及解决过程 代码 展示 一、清除表单的验证 问题的发生以及解决过程 表单弹窗关闭后再打开会出现上一次的验证信息提示&am…
阅读更多...
JS中如何判断一个值是否为Null

JS中如何判断一个值是否为Null

前言 在鉴别JavaScript原始类型的时候我们会用到typeof操作符。Typeof操作符可用于字符串、数字、布尔和未定义类型。但是你运行typeof null时&#xff0c;结果是“object”(在逻辑上&#xff0c;你可以认为null是一个空的对象指针&#xff0c;所以结果为“object”)。 如何判…
阅读更多...
Vue3【计算属性、Class绑定、Style绑定 、侦听器、表单输入绑定、模板引用、组件注册方式、组件嵌套关系 、组件注册方式】(三)-全面详解（学习总结---从入门到深化）

Vue3【计算属性、Class绑定、Style绑定 、侦听器、表单输入绑定、模板引用、组件注册方式、组件嵌套关系 、组件注册方式】(三)-全面详解（学习总结---从入门到深化）

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是小童&#xff0c;Java开发工程师&#xff0c;CSDN博客博主&#xff0c;Java领域新星创作者 &#x1f4d5;系列专栏&#xff1a;前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶 &#x1f4…
阅读更多...
一个小项目带你了解vue框架——TodoList（简单实用易上手）

一个小项目带你了解vue框架——TodoList（简单实用易上手）

写在前面 你是否还在为繁杂的事情感到头昏脑涨&#xff1f;你是否还在将便利贴贴满整个桌面&#xff1f;本文就为你解决这个烦恼&#xff0c;使用vue框架做一个TodoList&#xff0c;将事情整理的井井有条不再是一个遥不可及梦&#xff01;让我们行动起来吧&#xff01; 基于vue…
阅读更多...
解决前端项目问题，uniapp运行微信开发工具小程序，出现× initialize报错，以及浏览器无法运行

解决前端项目问题，uniapp运行微信开发工具小程序，出现× initialize报错，以及浏览器无法运行

项目场景&#xff1a; uniapp进行小程序以及多端web页面都不知道如何配置讲项目运行起来。 就会报出无法运行错误。 [微信小程序开发者工具] - initialize [微信小程序开发者工具] [微信小程序开发者工具] IDE may already started at port , trying to connect如图 问题描…
阅读更多...
微信小程序前端解密获取手机号

微信小程序前端解密获取手机号

微信小程序在获取用户手机号时安全正确的做法是把获取的iv等信息传递给后端&#xff0c;让后端解密&#xff0c;再提供接口返回给前端。 但是遇到一下比较一般的后端或者懒的后端的话&#xff0c;前端也可以考自己完成手机号解密。 1.使用授权手机号组件按钮 <view class&…
阅读更多...
【Vue】Cannot set reactive property on undefined,null,or primitive value:undefined

【Vue】Cannot set reactive property on undefined,null,or primitive value:undefined

一、背景描述技术栈&#xff1a;vue element报错内容&#xff1a;Cannot set reactive property on undefined, null, or primitive value:undefined如下图所示&#xff1a;二、报错原因根据报错内容翻译一下&#xff0c;就是不能对 undefined,null 或者原始值为 undefined 的…
阅读更多...
uniapp中怎么使用easycom 自定义组件

uniapp中怎么使用easycom 自定义组件

一、全局注册 uni-app 支持配置全局组件&#xff0c;需在 main.js 里进行全局注册&#xff0c;注册后就可在所有页面里使用该组件。 Vue.component 的第一个参数必须是静态的字符串。nvue 页面暂不支持全局组件。 二、局部注册 局部注册之前&#xff0c;在需要引用该组件的…
阅读更多...
详解Promise使用

详解Promise使用

Promise引入PromiseExecutorresolve不同值的区别then方法catch方法finally方法resolve类方法reject类方法all类方法allSettled方法race方法引入Promise 我们调用一个函数&#xff0c;这个函数中发送网络请求(我们可以用定时器来模拟)&#xff1b; 如果发送网络请求成功了&…
阅读更多...
前端面试题 | 什么是回流和重绘？它们的区别是什么？

前端面试题 | 什么是回流和重绘？它们的区别是什么？

在了解回流和重绘之前我们可以先简单了解一下浏览器的渲染过程~ 1. 解析获取到的HTML&#xff0c;生成DOM树&#xff0c;解析CSS&#xff0c;生成CSSOM树 2. 将DOM树和CSSOM树进行结合&#xff0c;生成渲染树&#xff08;render tree&#xff09; 3.根据生成的渲染树&#xff0…
阅读更多...
Vue开发环境安装

Vue开发环境安装

目录 Vue概述&#xff1a; Vue特点&#xff1a; Vue官网: 一、node.js安装和配置 1. 下载安装node.js Step1&#xff1a;下载安装包 Step2&#xff1a;安装程序 Step3&#xff1a;查看 问题解决&#xff1a; 解决npm warn config global --global, --local are depr…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023