VUE3 学习笔记(11):vue-router路由要懂的知识点

news2024/11/23 10:45:56

在前后端没有分离之前,大家通常采用的MVC模式,由后端通过Controller层实现页面跳转,VUE是组件化的特点,说白了就是一个单页面应用(挂载在public/index.html),意味着所有的页面只是各组件的组合。那么控制这些组合就无法通过传统方式进行控制了。

VUE 提供了路由配置vue-router进行处理,本文将着重介绍它的使用。

旧项目未配置vue-router

  安装vue-router

Npm install --save vue-router

或者

Cnpm install --save vue-router

  配置路由

  ST1:创建路由文件

1.项目/src/router(创建)

2.项目/src/router/index.js(创建)

index.js

import {createRouter,createWebHistory} from "vue-router";
//外部引用组件
import left from "@/components/left.vue";
const routes = [
    //动态引用组件(推荐)
    {
        path: '/',
        name: 'home',
        component: () => import('../components/main.vue')
    },
    //外部引用示例
    {
        path: '/left',
        name: 'left',
        component: left
    },
    {
        path: '/A',
        name: 'a',
        component: () => import('../components/A.vue')
    },
    {
        path: '/B',
        name: 'B',
        component: () => import('../components/B.vue')
    },
    {
        path: '/:pathMatch(.*)*',
        name: 'notfound',
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router;

ST2:启用路由

main.js

import { createApp } from 'vue'
import App from './App.vue'
import axios from "axios";
import router from "@/router/index.js";
const app=createApp(App).use(router)
app.config.globalProperties.$axios = axios;
app.mount('#app');

ST3:测试效果

app.vue

<!--内容控制-->
<template>
  <RouterView></RouterView>
  <router-link to="/left">left</router-link>
  <br></br>
  <router-link to="/">home</router-link>
  <br></br>
  <router-link to="/A">A</router-link>
  <br></br>
  <router-link to="/B">B</router-link>
</template>
<!--JS 控制-->
<script>

export default {

}
</script>

新项目配置vue-router

St1:创建项目时选择Router

如下图所示

st2:配置路由路径

目录/router/index.js

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
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

st3:测试效果

app.vue

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    </br>
    <RouterLink to="/about">About</RouterLink>
  </nav>

  <RouterView />
</template>

总结:

1.路由配置推荐使用动态组件

2.使用router时使用<router-vier>标签作为路由显示 入口

3.<router link...>路由跳转配置

路由传值

单个路由不传值就没有多大意义,比如我们希望路由时把对应的值传过去。

ST1:配置路由传值

import HomeView from '../views/HomeView.vue'

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

export default router

ST2:带参数传值

<template>

  <nav>
    <router-link to="/">首页</router-link>
    <router-link :to="{name:'about',params:{num:itemId}}"> 演示传参</router-link>
    <RouterLink :to="{name:'about',params:{num:itemId}}">演示传参2</RouterLink>
  </nav>

  <RouterView />
</template>

<script >

export default {
  data() {
    return {
      itemId: 999
    };
  }
}


</script>

ST3:引用并显示

<template>
  <div class="about">
    <h1>This is an about page:{{$route.params.num}}</h1>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
<script >
</script>

效果

嵌套路由

说白了就是在路由中套路由

目录/src/router/index.js

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
    },
    {
      path: '/about/:num',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
      children: [
          {
              path: 'us',
              name: 'us',
              component: () => import('../views/AbutUS.vue')
          },
          {
              path: 'HomeView',
              name: 'HomeView',
              component: () => import('../views/HomeView.vue')
          }
      ]
    }
  ]
})

export default router

示例

<template>
  <div class="about">
    <h1>This is an about page:{{$route.params.num}}</h1>
    <router-link :to="{name:'us'}">我们</router-link>
    <RouterLink :to="{name:'HomeView'}">公司</RouterLink>
    <RouterView></RouterView>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
<script >
</script>

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

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

相关文章

关于按键消抖方法—软件消抖

在设计单片机按键输入的时候&#xff0c;进行按键消抖是防止按键输入被CPU误读多次的必要手段。 一、按键消抖方法&#xff08;软件&#xff09; 如果按键较多的情况下&#xff0c;常用软件方法消抖 &#xff08;1&#xff09;延时消抖&#xff08;延时函数按键消抖&#xf…

24 - 查询近30天活跃用户数(高频 SQL 50 题基础版)

24 - 查询近30天活跃用户数 排序和分组 -- 日期相减 date_sub(2019-07-27, interval 30 day)获取新的日期 -- 日期范围 datediff(2019-07-27,activity_date)<30-- where activity_date > date_sub(2019-07-27, interval 30 day) -- and activity_date < 2019-07…

网络编程(八)

网络编程&#xff08;八&#xff09; 数据库数据库的分类基于嵌入式的数据库什么是SQLite?为什么使用SQLite?sqlite3数据库的安装 sqlite3中的点命令.open 数据库文件名字.tables [数据库文件名].schema 表名.database.quit.head on.mode column SQLite数据库中的数据类型SQL…

数据库MongoDB详解

文章目录 入门指南1. 安装 MongoDB2. 启动 MongoDB 服务3. 连接到 MongoDB4. 创建数据库和集合5. CRUD 操作6. 索引7. 备份与恢复 不同场景下的应用方式&#xff1a;应用案例展示 入门指南 MongoDB 是一个基于分布式文件存储的非关系型数据库&#xff08;NoSQL&#xff09;&am…

uniapp3步使用goeasy完成本地消息推送

1.注册登录goeasy&#xff0c;下载测试demo 2.替换demo中main.js中的key 3.打包一个H5&#xff0c;一个自定义基座。 h5发消息&#xff0c;app收消息&#xff0c;然后创建消息通知就好了。记得打开app的消息通知 demo很简单&#xff0c;demo都跑通了&#xff0c;在搬到自己项目…

OZON海关税费是多少,OZON要交关税吗

在跨境电商领域&#xff0c;OZON作为俄罗斯知名的电商平台&#xff0c;吸引了众多国内外商家的目光。然而&#xff0c;当商家考虑在OZON平台上开展业务时&#xff0c;一个不可回避的问题就是海关税费和关税问题。本文将详细探讨OZON海关税费的相关内容&#xff0c;帮助商家更好…

【时间复杂度】定义与计算方法

文章目录 1.什么是时间复杂度&#xff1f;2.时间复杂度类别2.1 常量阶 O(1)2.2 对数阶 O(log n)2.3 线性阶 O(n)2.4 线性对数阶 O(n log n)2.5 平方阶 O(n^2^) 1.什么是时间复杂度&#xff1f; 时间复杂度是计算机科学中用来描述算法执行时间效率的一个概念。它表示了算法执行时…

Python中的“点阵字体”

“点阵字体”是个啥&#xff1f;&#xff0c;在python中怎么使&#xff1f;在现在全面高清的 5 G 5G 5G时代&#xff0c;它还有用“武”之地&#xff1f; (笔记模板由python脚本于2024年06月01日 18:44:31创建&#xff0c;本篇笔记适合会基本编程的coder翻阅) 【学习的细节是欢…

Vue.js 与 TypeScript(1) :项目配置、props标注类型、emits标注类型

像 TypeScript 这样的类型系统可以在编译时通过静态分析检测出很多常见错误。这减少了生产环境中的运行时错误&#xff0c;也让我们在重构大型项目的时候更有信心。通过 IDE 中基于类型的自动补全&#xff0c;TypeScript 还改善了开发体验和效率。 一、项目配置 1、在项目中添…

USB (1)

再看USB 其实回过头看USB 是可以和无线 有线(internet) 可以和PCIe 甚至AXI类比的 它们共通处在于都是communication 有限通信 有7层网络协议 在USB也是分层的 不同的协议,依赖的介质不一样 这就要求相应的Physical层处理 USB的physical层是基于Serdes的,所以有串并/并串的…

组装服务器重装linux系统【idrac集成戴尔远程控制卡】

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 &#x1f3c5;阿里云ACE认证高级工程师 &#x1f3c5;阿里云开发者社区专…

内网安全--隧道技术代理技术

注:本文仅做技术交流,请勿非法破坏... 目录 项目: 1-Ngrok 用法 2-Frp 用法 3-Nps 用法 4-Spp 用法 工具: windows下: Proxifier(推荐~) Sockscap ccproxy Linux下: Proxychains 用法 http://t.csdnimg.cn/88Ew7 隧道技术&#xff1a;解决不出网协议上线的问…

ARM Linux 驱动开发学习之字符设备驱动开发

Linux 中的设备驱动程序是连接硬件设备和操作系统之间的重要桥梁&#xff0c;确保硬件设备能够在操作系统控制下正常工作。在 Linux 中&#xff0c;设备驱动主要分为三大类&#xff1a;字符设备驱动、块设备驱动和网络设备驱动。下面我将详细解释这三类驱动的特点、用途和区别。…

激活函数对比

激活函数 sigmoid / tanh / relu / leaky relu / elu / gelu / swish 1、sigmoid 优缺点 1) 均值!0&#xff0c;导致fwxb求导时&#xff0c;方向要么全正要么全负 可以通过batch批量训练来缓解 2) 输入值大于一定范围梯度就会消失 3) 运算复杂 2、tanh 优缺点 1) 均值0 2)…

To C道路越走越夯实,1688彻底变身了?

在偌大的电商市场&#xff0c;消费者都是专业的“掘宝者”&#xff0c;热衷于发现各种新奇商品和采购新通路。 拼多多、1688等平台也正是在这种情况下&#xff0c;成为消费市场的“宠儿”。其中&#xff0c;1688的发展路径较为独特&#xff0c;据天眼查&#xff0c;其为源头厂…

苍穹外卖笔记-07-菜品管理-增加、删除、修改、查询分页还有菜品起售或停售状态

菜品管理 1 新增菜品1.1 需求分析与设计1.2 代码开发文件上传新增菜品实现 1.3 功能测试 2 菜品分页查询2.1 需求分析和设计2.2 代码开发设计DTO类设计VO类Controller层Service层Mapper层 2.3 功能测试 3 删除菜品3.1 需求分析和设计3.2 代码开发Controller层Service层Mapper层…

Apple开发者证书创建完整过程

1.创建CSR文件: 打开钥匙串访问程序 选择从证书颁发机构请求 创建证书 保存CSR文件到桌面 成功如下: 开始创建证书: 选择

SDXL终于有了足够好的 Openpose 和 Scribble 模型可以使用了。

SDXL终于有了足够好的 Openpose 和 Scribble 模型可以使用了。 xinsir 发布的Openpose 和 Scribble 模型质量相当好&#xff0c;尤其是 Openpose。不过只支持姿态不支持面部。 再加上前几天的 Anyline 线条预处理器和 Canny 模型。SDXL 的生态在发布快一年的时候成熟了。 模…

QA测试开发工程师面试题满分问答26: Cookie、Session、Token和JWT的定义、区别和使用场景

这是一个非常常见的面试题,需要全面掌握 Cookie、Session、Token 和 JWT 的定义和使用场景,以及它们之间的区别。下面是一个详细的满分回答: Cookie: 定义: Cookie 是一种存储在客户端(通常是浏览器)的小型文本文件,用于在客户端与服务器之间保持会话状态。使用场景: 常用于保存…

sqli-labs 靶场 less-5、6 第五关和第六关:判断注入点、使用错误函数注入爆库名、updatexml()函数

SQLi-Labs是一个用于学习和练习SQL注入漏洞的开源应用程序。通过它&#xff0c;我们可以学习如何识别和利用不同类型的SQL注入漏洞&#xff0c;并了解如何修复和防范这些漏洞。Less 5 SQLI DUMB SERIES-5 判断注入点&#xff1a;1. 首先&#xff0c;尝试正常的回显内容&#x…