vue路由插件vue-router使用教程

最新推荐文章于 2024-04-23 14:28:51 发布
最新推荐文章于 2024-04-23 14:28:51 发布
阅读量437 收藏 1
点赞数
分类专栏： vue开发日记 搬砖日常
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44469200/article/details/103304210
版权

静态路由vue-router

使用路由可以方便我们访问多个组件，后面也会使用到路由跳转中
安装:
npm install vue --save-dev
npm install vue-router --save-dev

引入模块
在这里插入图片描述

router
在这里插入图片描述
在App.vue里面加写入 <router-view></router-view>
在这里插入图片描述
在命令提示行输入 “npm run dev” 执行项目
在这里插入图片描述
在这里插入图片描述

在浏览器输入域名地址 “域名地址+路由地址” 如： http://localhost:8081 + /#/login、http://localhost:8081 + /#/find就能访问 “/login”、“/find”组件
在这里插入图片描述

约妲己吃火锅
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中使用vue-router 路由
dengz_j的博客
12-24 116
vue-router 路由 当前项目下 npm install vue-router --save-dev npm install vue-router 安装路由 –save-dev 保存在dev的配置中 使用方法 项目目录结构 1.定义组件 自定义组件Content.vue和Main.vue Content.vue <template> <h1>内容页</h1> </template> <script> export
vue-router路由插件的使用
weixin_46214451的博客
06-18 1045
今天我们来学习vue-router路由插件的使用，先来了解一下什么是vue-router。由于 Vue.js 是一个视图层框架，并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue.js 并不包含页面的跳转以及通信功能，而是使用vue-router路由插件（页面跳转）和axios（通信）实现的。在前后端分离的模式下，原本由后端来做的重定向和转发的事情就交给前端来做了。 搭建项目 首先我们要搭建一个vue项目，详细的搭建步骤在我的上篇博客有写道，这里不再赘述。不会搭建vue项目的小伙伴可以先去
vue路由教程之静态路由
10-16
主要给大家介绍了关于vue路由教程之静态路由的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue动态路由/静态路由
书中自有妍如玉的博客
07-29 5634
/history需要修改config/index.js下的assetsSubDirectoryhistory'static'hash为默认'/'.path'/list/id',//url的名称，在浏览器地址栏的输入内容。使用示例localhost/8080/localhost/8080/list。path'/list',//url的名称，在浏览器地址栏的输入内容。name'list',//路由的名称。name'list',//路由的名称。.........
若依vue中的静态路由和动态路由
最新发布
字节叔叔
04-23 1721
在使用若依Vue（Ruoyi Vue）时，了解静态路由和动态路由的概念和用法是至关重要的。本文将介绍这两种路由的基本概念、特点以及它们在若依Vue中的应用。静态路由适用于路由规则不经常变化的场景，如主要菜单导航等。动态路由适用于需要根据用户权限或其他条件动态生成路由规则的场景，如权限管理系统。
vue 3.0 静态路由配置
一起学习一起进步~
05-15 1159
其中path表示的是页面将要跳转的地址，name表示该页面的name属性，component表示该页面在项目中的位置。上述代码中首先引入了vue的路由依赖，设置了首页地址，404界面地址和我们的业务地址。其次是main.js文件的配置，这部分配置主要是添加router依赖。紧接着在建立的router文件夹中新建一个index.js文件。今天研究了一下vue3.0的静态路由配置，分享一下。或者省略这一步，直接在浏览器中输入跳转地址也可以。做完这些后，我们在VUE页面中设置跳转连接。
vue-router 静态路由
Gomeer的博客
12-19 1845
SPA （单页应用程序）        只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。   浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。 特点 速度：更好的用户体验，让用户在...
vue中的路由跳转方法，详细（vue路由跳转）
weixin_65793170的博客
12-08 6961
补充：获取参数的时候是$route（$route是用来获取路由信息的），而不是$router（$ router是用来操作路由的），然后以上都可以写成行内跳转方式，例如@click="$router.back(-1)" 。
Vue.js路由vue-router使用方法详解
01-19
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现...
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
Vue路由管理器Vue-router的使用方法详解
10-15
本文将详细介绍Vue路由管理器Vue-router的使用方法详解,需要的朋友可以参考下
简单说说如何使用vue-router插件的方法
10-17
主要介绍了如何使用vue-router插件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uniapp中的一个完全相似Vue-router的路由插件
01-20
本人小白，干这一行时间还短，出现什么问题望大佬指正。 这篇文章是结合文档然后...第二种 插件市场（使用HBuilderX导入插件） 第三种 ZIP下载 解压 2.项目中引入 import Vue from 'vue' import {RouterMount} from 'un
Vue-Router的使用方法
12-11
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home...
最新vue路由跳转传参方式query or params
奔跑吧代码
05-19 1342
最新vue路由跳转传参方式query or params
vue关于静态路由和动态路由：
weixin_48123820的博客
05-23 2938
这篇文章写得超详细！！！👇。
Vue-router路由
qq_43618583的博客
02-01 172
一、URL的hash 可以通过直接赋值location.hash来改变href, 但是页面不发生刷新 二、HTML5的history模式：pushState 三、HTML5的history模式：replaceState 四、HTML5的history模式：go 五、搭设路由框架 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。 1.安装 2.在src文件下创建router文件夹 3.在router文件夹下创建index.js，用来配置所有的路由
vue3 配置路由
热门推荐
悟世君子的博客
06-10 1万+
使用 vue3 配置路由，步骤如下 1、安装路由 npm install vue-router@4
vue3使用vue-router路由拆分
09-06
你可以在每个组件中使用`<router-link>`和`<router-view>`来进行导航和渲染路由组件。 注意：以上只是一个简单的示例，你可以根据你的项目需求进行更复杂的路由配置和组织方式。不过，以上步骤应该可以帮助你开始...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值