Vue3配置router路由步骤

Vue3配置router路由步骤

首先创建一个vue3的项目

先检查一下router的版本,可以在pakage.json里面查看,也可以你直接在终端输入

npm list vue-router

如果版本比较低的话,先升级一下
vue3的话,用以下命令

npm install vue-router@4

vue2的话用

npm install vue-router@3

准备工作完成后,就可以开始新建文件夹了,我们在src下面创建一个views
,然后再再views里面创建两个vue文件,分别是【index】和【content】
以下是两个文件的代码
【index】
在这里插入图片描述
【content】
在这里插入图片描述
接下来再去src路径下创建一个router文件夹,然后在router下面创建一个index.js
index.js配置如下:

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
    {
        path: '/',
        component:()=>import("../views/index.vue")
    },
    {
        path: '/content',
        component:()=>import("../views/content.vue")
    }
]

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

export default router

最后一步,我们去Main.js上挂载一下,router就好了
代码如下:Main.js文件中

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

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

最后启动浏览器,不出意外的话就可以看得到了~

传参方式

通过以上的步骤,我们项目的router已经开始工作起来了,接下来我们再来看一下参数如何传递

1. 链接传参

直接在请求后面加?然后写参数,例如:
在这里插入图片描述
vue文件中取值方法如下:

id:{{ $route.query.id }}

2.路径传参

{
        path: '/user/:id',
        component:()=>import("../views/user.vue")
    }

完整截图
在这里插入图片描述
vue页面取值方式:

id:{{ $route.params.id }}

完整代码如下:

<template>
  <div>
    个人主页
    <hr>
    id:{{ $route.params.id }}
  </div>
</template>

实例效果
在这里插入图片描述

多参数传值

 {
        path: '/user/:id/name/:name',
        component:()=>import("../views/user.vue")
    }
其它的一样,然后页面取值方式也是和单参数一样。浏览器效果如下

在这里插入图片描述

特殊情况下,路由里面定义了多参数,但是有些参数有时候不需要的话, 可以在参数后面添加?号,这样就不是必须要传递的参数了

{
      path: '/user/:id/name/:name?',
      component:()=>import("../views/user.vue")
  }

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言TCP服务器模型 : select + 多线程与双循环单线程阻塞服务器的比较

观察到的实验现象: 启动三个客户端: 使用双循环阻塞服务器:只能accept后等待收发,同时只能与一个客户端建立连接,必须等已连接的客户端多次收发 明确断开后才能与下个客户端连接 使用IO多路复用select:可以同时接收所有的连接请求,并且连接状态一直是存活的,直到客户端关闭连…

Kubesphere 自动化部署失败报错

Kubesphere 自动化部署在 push tag 阶段失败报错 git push http://****:****github.com/****/devops-java-sample.git --tags --ipv4 remote: Support for password authentication was removed on August 13, 2021. remote: Please see https://docs.github.com/get-started/g…

Netty是什么

一、Netty介绍 1、Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用以快速开发高性能、高可靠性的网络IO程序。 2、Netty主要针对在TCP协议下&#xff0c;面向Clients端的高并发应用&#xff0c;或者Peer-to-Peer场景下的大量数据持续传输的应用。 3、Netty本质是…

银行数字化转型导师坚鹏:银行数字化转型给分行带来的8大价值

银行数字化转型给分行带来的8大价值 银行数字化转型对不仅对总行产生了深远影响、给总行带来了新质生产力&#xff0c;对分行也会产生重要价值&#xff0c;银行数字化转型导师坚鹏从以下8个方面进行详细分析&#xff0c;相信能够给您带来重要启发&#xff0c;从而加速银行分行…

【并发编程系列】使用 CompletableFuture 实现并发任务处理

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

[C#]OpenCvSharp利用MatchTemplate实现多目标匹配

【效果展示】 原图 模板图 匹配结果&#xff1a; 【实现部分代码】 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using…

RabbitMQ3.x之九_Docker中安装RabbitMQ

RabbitMQ3.x之_Docker中安装RabbitMQ 文章目录 RabbitMQ3.x之_Docker中安装RabbitMQ1. 官网2. 安装1 .拉取镜像2. 运行容器 3. 访问 1. 官网 rabbitmq - Official Image | Docker Hub 2. 安装 1 .拉取镜像 docker pull rabbitmq:3.13.0-management2. 运行容器 # latest Rabb…

从零起步:开启你的IT职业之旅

简介&#xff1a; 信息技术&#xff08;IT&#xff09;行业以其快速发展和广阔的就业前景吸引着全球众多职场新人。但对于零基础的求职者而言&#xff0c;挺进这一行业似乎是条充满挑战的道路。进入IT行业可能看起来是一项艰巨的挑战&#xff0c;尤其是对于那些没有任何相关经…

伪造靶机之iptables

伪造禁ping、网络不可达、主机不可达、协议、端口的命令 iptables -A INPUT -p icmp --icmp-type echo-request -j DROP iptables -A INPUT -s 172.18.6.89 -p icmp -j REJECT --reject-with icmp-net-unreachable iptables -A INPUT -s 172.18.6.89 -p icmp -j REJECT --re…

【Canavs与艺术】绘制蓝白绶带大卫之星勋章

【图例】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>用Canvas绘制蓝白绶带大卫之星勋章</title><style type&quo…

Python如何解决“滑动拼图”验证码(8)

前言 本文是该专栏的第67篇,后面会持续分享python爬虫干货知识,记得关注。 做过爬虫项目的同学,或多或少都会接触到一些需要解决验证码才能正常获取数据的平台。 在本专栏之前的文章中,笔者有详细介绍通过python来解决多种“验证码”(点选验证,图文验证,滑块验证,滑块…

网络协议——VRRP(虚拟路由冗余协议)原理与配置

1. VRRP概述 单网关出现故障后下联业务中断&#xff0c;配置两个及以上的网关时由于IP地址冲突&#xff0c;导致通讯时断时续甚至通信中断。VRRP组播类的网络层协议 2. 协议版本 VRRP v2: 支持认证,仅适用于IPv4网络 VRRP v3: 不支持认证&#xff0c; 适用于IPv4和IPv6两种网…

【Leetcode笔记】102.二叉树的层序遍历

目录 知识点Leetcode代码&#xff1a;ACM模式代码&#xff1a; 知识点 vector、queue容器的操作 对vector<int> vec;做插入元素操作&#xff1a;vec.push_back(x)。对queue<TreeNode*> que;做插入元素操作&#xff1a;que.push(root);。队列有四个常用的操作&…

【Python系列】 yaml中写入数据

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

普联一面4.2面试记录

普联一面4.2面试记录 文章目录 普联一面4.2面试记录1.jdk和jre的区别2.java的容器有哪些3.list set map的区别4.get和post的区别5.哪个更安全6.java哪些集合类是线程安全的7.创建线程有哪几种方式8.线程的状态有哪几种9.线程的run和start的区别10.什么是java序列化11.redis的优…

深度解读DynamIQ架构cache的替换策略

快速链接: 【精选】ARMv8/ARMv9架构入门到精通-[目录] &#x1f448;&#x1f448;&#x1f448; 思考: 在经典的 DynamIQ架构 中&#xff0c;数据是什么时候存在L1 cache&#xff0c;什么时候存进L2 cache&#xff0c;什么时候又存进L3 cache&#xff0c;以及他们的替换策略是…

ArcGIS Pro导出布局时去除在线地图水印

目录 一、背景 二、解决方法 一、背景 在ArcGIS Pro中经常会用到软件自带的在线地图&#xff0c;但是在导出布局时&#xff0c;图片右下方会自带地图的水印 二、解决方法 解决方法&#xff1a;添加动态文本--服务图层制作者名单&#xff0c;然后在布局中选定位置添加 在状…

红蓝色WordPress外贸建站模板

红蓝色WordPress外贸建站模板 https://www.mymoban.com/wordpress/5.html

【Java】打包:JAR、EAR、WAR

打包&#xff1a;JAR、EAR、WAR war 是一个 Web 模块&#xff0c;其中需要包括 WEB-INF&#xff0c;是可以直接运行的 WEB 模块。而 jar 一般只是包括一些 class 文件&#xff0c;在声明了 main_class 之后是可以用 java 命令运行的。 它们都是压缩的包&#xff0c;拿 Tomcat …

LeetCode_234(回文链表)

//时间复杂度O(n) 空间复杂度O(1)public boolean isPalindrome(ListNode head) {ListNode fast head,slow head;while (fast !null && fast.next !null){fast fast.next.next;slow slow.next;}//如果链表是奇数个结点&#xff0c;把正中的归到左边if(fast ! null){s…