vue3.x 中的路由基本配置

最新推荐文章于 2023-07-25 11:48:24 发布
最新推荐文章于 2023-07-25 11:48:24 发布
阅读量1k 收藏 1
点赞数
文章标签： p2p javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sheng6666/article/details/121945755
版权

1.安装路由模块 npm install vue-router@next  --save

 2.新建home.vue /news.vue/user.vue等组件

3.新建routes.ts文件，引入组件配置文件并将其暴露出去

 4.在main.ts中引入并挂载路由

 5.在app.vue中使用router-view动态挂载路由

 6.使用npm run serve运行代码，在浏览器中手动输入不同地址动态挂载不同的组件

 7.在app.vue中路由跳转

 

 

 

 

Sheng6666
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 - 路由 Vue-router 4.X（配置与使用教程）
王佳斌
11-30 3757
vue3 路由官方文档，vue3 路由文档，vue-router4 官方文档，使用Vite构建Vue3项目,对路由Vue Router，Vue3中 Vue Router4路由的配置，vue3-vueRouter v4.x， vue3 中 vue-router4 基本使用(路由基本配置)，Vue3 - Router@4.x使用，vue-router4.x教程，Vue 3 中基于 vue-router 4 的路由配置与使用的简单示例，Vue实战—路由轻松设置vue-router(3) ，10分钟快速上手VueR
Vue3.X项目的路由配置
xjx0121的博客
10-16 408
使用children属性声明子路由{//子路由重定向]},水果苹果橘子
vue 3.x路由的创建
cldyxiong的博客
06-26 139
import Vue from 'vue' //1. 导入Vue2的构造函数 import VueRouter from 'vue-touter' //导入3.x路由的构造函数 import Home from '@/components/Home.vue' // 3.导入需要路由切换的组件 Vue.use(VueRouter) //4.调用Vue.use() 函数 ，把路由配置为Vue的插件 const router = new VueRouter ({ routes
20.Vue3.x中的路由(1) 路由配置
05-17 715
一、Vue3.x中的路由 路由可以让应用程序根据用户输入的不同地址动态挂载不同的组件。 https://next.router.vuejs.org/ npm install vue-router@next 二、路由的基本配置 安装路由模块 npm install vue-router@next --save 新建组件(就是上一节的组件代码) components/Home.vue， components/News.vue, components/User.vue, 在src目录下新建rout
vue3路由属性和配置
m0_67388537的博客
07-25 1030
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。用户第一次访问网站页面(“/根目录”首页)时，地址栏里边没有“#锚点”的信息，也就没有对应的组件用于显示，用户体验不好，现在可以通过。实现一种效果，即当浏览器没有任何 #锚点信息时，默认也给显示一个组件。
项目实战-爬坑系列vue-cli3.x中路由的使用（八）
月落星河
05-06 1018
今天说一下路由的使用方法，因为vue-router的使用无论是在vue-cli2.x和vue-cli3.x中的是一样的，所以我在这里用的是vue-cli2.x的版本。 1、我的vue-router是在安装vue-cli中安装的，如果没有安装你需要先安装一下vue-router（建议还是在vue-cli中直接去选择安装vue-router） npm install vue-router 2、然...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
在路由配置中，可以利用setup()函数和ref、reactive等工具来管理状态和响应式数据。 2. **Vite的配置与使用**：Vite 使用ES模块的动态导入，大大减少了项目的初始加载时间。配置文件 vite.config.js 可以定制化构建...
基于 vite3.x + vue3.x + antd-design-vue3.x 基础的后台管理系统模板.zip
最新发布
01-03
文件名为“VUE3_new”的压缩包很可能是项目的主要源代码目录，包含了整个后台管理系统的组件、路由、样式、配置等文件。开发者可以通过解压并根据项目结构进行开发和定制，以满足特定业务需求。总的来说，这个模板为...
6.（vue3.x+vite）路由传参query与params区别.rar
09-15
在Vue 3.x中，结合Vite使用，我们可以利用`createRouter`或`createWebHistory`等API来设置和管理路由，其中`routes`配置可以定义包含`params`和`query`的路径。在组件内，我们可以使用`this.$route.params`和`this.$...
基于vite2.x + vue3.x + ant-design-vue3.x + typescript基础后台管理系统模板
07-08
【标题】：“基于vite2.x + vue3.x + ant-design-vue3.x + typescript基础后台管理系统模板” 【描述】：这个项目是一个现代的、高效的基础后台管理系统模板，它结合了最新的前端技术栈，包括vite2.x作为构建工具，...
vue-cli 3.x搭建的项目中vue-router的使用
sleepwalker_1992的专栏
02-05 2333
vue-cli 3.x 文档：https://cli.vuejs.org/zh/ Vue Router Vue Router基本用法 vue-router实现Vue组件之间传参 一、选择默认的包含基本的 Babel + ESLint 设置的 preset，创建一个默认的vue项目，项目目录结构如下： 二、安装vue-router，并在项目中使用 1、安装 np...
Vue3中路由基本使用
wsb_2526的博客
01-08 627
Vue3中路由基本使用
Vue3 vue-router路由
lmy21的博客
06-11 380
是Vue.js官方提供的路由插件，与vue.js深度集成，便于用户使用于构建单页面应用（SPA）。
vue3路由部署（空项目）
m0_53257458的博客
05-22 256
【代码】vue3路由部署（空项目）
Vue3中的路由功能：安装和配置Vue Router、路由的基本用法、动态路由、嵌套路由
网络技术联盟站
07-18 5725
在本文中，我们详细介绍了Vue3中的路由功能。我们学习了如何安装和配置Vue Router，以及路由的基本用法、动态路由、嵌套路由和路由守卫等内容。通过合理地使用Vue Router，我们可以构建复杂的页面结构，实现灵活的路由导航，并在路由切换时执行额外的逻辑。
vue3中配置路由
qq_48378883的博客
06-20 1937
component: () => import('@/views/Home/Home.vue') //路由懒加载按需导入。2.在router文件夹新建router.js文件配置路由。router.getRouters()，获取所有路由信息。params就是$route.params。query 就是$route.query。router-view 子路由出口。获取路由信息useRoute()路由传参 path+query。4.在main.js中挂载路由。5.vue3中的路由api。
Vue-cli3如何添加路由（router）
热门推荐
邓占勇的博客
01-17 2万+
之前使用的vue-cli2的是否可以在创建项目时直接引入vue-router，但是现在Vue-cli3新建项目后却少了很多东西，我们需要自己来安装使用路由。具体方案如下： 安装路由 npm install vue-router 创建router.js与mian.js同级 router.js中的内容为 import Vue from 'vue' import Router from...
vue 创建项目并添加路由（Vue路由入门教学，图文详解）
天道酬勤
07-08 2万+
注：初学vue，如有错误。请指教，谢谢！ 最近在看十次方项目，但是vue版本进行了更新，vue由2版本升级为3版本，有很大的差别。 1.vue-cli 1.1 介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 1.2 下载vue-cli 在命令行下运行 npm install -g @vue/cli # OR yarn global add @vue/cli 1.3 构建项...
创建vue3项目和配置路由
weixin_45838066的博客
02-27 1018
vue-cli脚手架:vue2脚手架 vue3脚手架:vite vue官网: [介绍 — Vue.js vscode插件 vetur 必备工具 vue-helper 一些辅助功能 Vue VSCode Snippets 片段 方法和vue3一样 一.创建项目 安装脚手架 npm install -g create-vite-app 创建项目 create-vite-app projectName 安装依赖 用vscode打开项目, 运行..
vue2.x路由导航守卫案例
07-17
// 其他路由配置... ] }) router.beforeEach((to, from, next) => { if (to.meta.requiresAuth) { // 判断路由是否需要进行身份验证 // 进行身份验证逻辑，比如检查用户是否登录 if (userLoggedIn) { next() ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值