怎么用Vue-Router实现多页面切换？

最新推荐文章于 2024-02-09 16:05:37 发布
最新推荐文章于 2024-02-09 16:05:37 发布
阅读量8k 收藏 25
点赞数 10
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kzj0916/article/details/107951779
版权

用Vue-Router实现多页面切换

1.下载Vue-Router

在这里插入图片描述

2.创建专属文件夹，文件夹里创建js进行配置

在这里插入图片描述
config 配置mode网址显示的方式为正常的路径
routes 配置各地址对应的组件 默认地址 ‘/’ 显示 主页组件
若多个页面要用到同一个组件只是其中请求数据不同可在其后面加：id 不一定必须取id，可以自己定义
'*'表示以上所有地址都未匹配到则执行404错误页面
name 是为了 更好更精确的跳转到想要页面 如果只是path的话，改变path则将会找不到页面，而有了name之后，不管怎么修改path地址，都会跳转到该name的对应地址。
在这里插入图片描述

index 导入 vue-router vue config
使用vue-router
将config传入配置vue-router 返回配置好的router
在这里插入图片描述

使用vue-router

导入router 在vue实例对象中加入router
在这里插入图片描述
在app.vue组件运用 router-view 标签
router-view 标签 会根据页面地址的变化而选择性的让对应的组件显示，从而实现单页面中多页面切换。

在这里插入图片描述
通过router-link 标签相当于a标签 不过使用router-link可防止页面刷新
配合 to搭配对应地址使用 to 中配置跳转的对应name
同一name多页面可以进行详细匹配 配置对应页面的id 和请求数组的id是否一致来切换

在这里插入图片描述

End

index
在这里插入图片描述

news
在这里插入图片描述
news
在这里插入图片描述
login
在这里插入图片描述
这样就成功执行了用vue-router 多页面切换啦~
点个赞，米娜 0.0

Might°
关注
  • 10
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
2024年前端最全实战 Vue 之配置多页面应用_vue 多页面，渣本二面阿里受挫
2401_84616230的博客
05-06 670
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。也许是互联网未来10年中最好的一年。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。
详解vue-router 动态路由下子页面多页共活的解决方案
10-15
主要介绍了vue-router 动态路由下子页面多页共活的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue-router: 实现纯前端多页面应用（Vuecli+Element UI）
PaulXerxes的博客
03-18 2965
1.简介 1.1 为什么要用Vue-router 我想做一个带导航栏的简单web页面，页面的内容可以随导航栏的点击切换。第一个想法是想用webpack打包出几个页面，然后在每个页面的按钮上添加链接，但是这样做每次页面都要刷新，效率上存在很大问题，并且用户点击之后导航栏也会跟着刷新，体验不好，于是发现Vue中的Vue-router很适合实现这种简单的多页面应用。 1.2 Vue-router的两种模...
vue学习【三】vue-router路由显示多页面
dielimin4389的博客
08-29 540
　　大家好，我是一叶，今天是七夕，单身狗的我还在这里写踩坑文。在这里还是要祝大家早日脱单（能不能脱单自己心里没个数吗）。本篇继续踩坑，在单页面上展示多页的内容，大家的想法是什么，估计大家第一印象会是iframe框，但是iframe的缺点大过优点，在vue中也是放弃使用的。vue中引入了router的观点，从而实现单、多页面的跳转，接下来进入正文。 　　首先使用vue-cli脚手架搭建项...
vue-router实现简单vue多页切换、嵌套路由、路由跳转
最新发布
m0_73548338的博客
02-09 1335
vue3选择V4.x，vue2选择V3.x。
使用VueRouter实现多页面应用的路由跳转
aike13ky的博客
12-29 627
Vue Router是Vue.js官方的路由管理器，用于构建单页面应用。它可以实现嵌套路由、动态路由选择、模块化路由配置等功能，并提供导航控制、HTML5历史模式、URL编码等特性。
vue-router实现webApp切换页面动画效果代码
08-30
本篇文章主要介绍了使用 Vue Router 实现 webApp 页面切换动画效果的实例代码。下面将详细介绍实现该动画效果的知识点。 一、为什么需要实现页面切换动画效果 在 webApp 中，页面之间的切换是非常常见的操作。为了...
使用vue-router切换页面时实现设置过渡动画
10-16
在Vue.js应用中，使用vue-router进行页面切换时，我们经常希望添加过渡动画来提升用户体验。这篇文章将详细讲解如何在vue-router中实现页面切换的过渡动画。 首先，我们需要理解vue-router的基本概念。Vue Router是...
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
主要介绍了vue项目中在使用vue-router切换页面的时候滚动条自动滚动到顶部的实现方法，一般使用Window scrollTo() 方法实现，本文给大家简单介绍了crollTop的使用,需要的朋友可以参考下
Vue-Router实现页面正在加载特效方法示例
12-09
传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用。因为每个页面都是一个 Vue 组件，...
vue tabs实现页面切换
09-11
类似easyui的tabs实现页面切换，之前使用iframe，vue里面ie的兼容不是特别友好所以改为route-view
vue实现同一个页面可以有多个router-view的方法
10-17
今天小编就为大家分享一篇vue实现同一个页面可以有多个router-view的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 多页面跳转配置与实现（看了就会，一步一步作）
热门推荐
qq_44629323的博客
08-02 1万+
通常我们在vue框架中制作页面都是单页面操作，如果我们想要进行多页面操作，比如实现显示不同ico图标都需要进行多页面操作，下面我们一起来实现 实现多页面跳转需要进行页面的移动和配置 1.初始化项目，进入项目根目录下，我们会看一般性的文档配置如下： 我们需要修改的是public文件夹和src文件夹，以及增加一个配置文件vue.config.js. 在我们原本的项目中index.html、main.js和app.vue的位置是： 1.index.html —> 在public文件夹下 2.main.js
Vue--router-->>项目多路由嵌套--常用
guohao326的博客
05-31 5753
html> html lang="en"> head> meta charset="UTF-8"> title>vue-routertitle> link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"> script src="js/vue.j
vue多页面应用
吕秀军的博客
09-13 2247
http://www.cnblogs.com/fengyuqing/p/vue_cli_webpack.html
Vue实现Tabs页面切换(原生)——改进版
Vivien_CC的博客
03-27 2712
昨晚先大约做了一下基本的要求，今天早上花了点时间实现选择左右上下显示的功能，仍然是比较简单的语句，我发现原来用模板来写如此简单！复制粘贴改一改就好了。但还是要记录一下代码，后续实习期间需要用到可以翻出来看看。 记录一下主要代码 1.Top <template> <div> <h1>{{ msg }}</h1> <button class="first" :class="{'ActiveBtn':isActive==...
router-view和父页面互调方法
sunshineTing2的博客
05-29 5159
子页面调父页面: this.$parent.fatherMethod() 父页面调子页面: this.$refs.childName.childMethod() parent 父页面 <div> <h1>父级页面</h1> <button @click="callChild">调用子页面方法</button> <button @click="beiChildMethod">被子页面调用方法</button&
「网页开发｜前端开发｜Vue」02 从单页面到多页面网站：使用路由实现网站多个页面的展示和跳转
过美好生活，做高效程序员
08-29 2712
本文主要介绍如何使用路由控制来实现将一个单页面网站扩展成多页面网站，包括页面扩展的逻辑，vue的官方路由vue-router的基本用法以及扩展用法
vue-router 来实现导航栏的点击切换页面
03-21
可以使用 vue-router 来实现导航栏的点击切换页面。首先需要在 Vue 项目中安装 vue-router，然后在 main.js 中引入并使用它。接着在 App.vue 中定义路由，包括路由路径和对应的组件。最后在导航栏中使用 router-link 标签来实现点击切换页面。具体实现可以参考官方文档或相关教程。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值