广告
返回顶部
首页 > 资讯 > 精选 >vue如何切换路由
  • 204
分享到

vue如何切换路由

2024-04-02 19:04:59 204人浏览 安东尼
摘要

在Vue中切换路由的方法:1.新建项目,引入vue和vue-router;;2.使用Vue.use方法注册路由;3.定义路由;4.配置路由;5.使用el-menu-item标签设置路由点击切换;具体步骤如下:首先,在新建一个html项目,并

Vue中切换路由的方法:1.新建项目,引入vue和vue-router;;2.使用Vue.use方法注册路由;3.定义路由;4.配置路由;5.使用el-menu-item标签设置路由点击切换;

vue如何切换路由

具体步骤如下:

首先,在新建一个html项目,并在项目中引入vue和vue-router;

import Vue from 'vue'

import Router from 'vue-router'

vue和vue-router引入好后,在项目中使用Vue.use方法注册路由;

Vue.use(Router)

路由注册好后,在页面中分别定义三个路由于切换;

export default {

name:"AComponent"

}

export default {

name:"BComponent"

}

export default {

name:"CComponent"

}

路由定义好后,在项目中执行以下代码配置路由;

{

path: '/index',

name: 'index',

component: resolve => require(['@/components/routerTab/index.vue'],resolve),

children:[

{

path:'aaa',

component: resolve => require(['@/components/routerTab/A.vue'], resolve)

},

{

path: 'bbb',

component: resolve => require(['@/components/routerTab/B.vue'],resolve)

},

{

path: 'ccc',

component: resolve => require(['@/components/routerTab/C.vue'],resolve)

}

]

}

最后,路由配置好后,使用el-menu-item标签设置路由点击切换即可;

<el-menu-item index="/index/aaa">A</el-menu-item>

<el-menu-item index="/index/bbb">B</el-menu-item>

<el-menu-item index="/index/ccc">C</el-menu-item>

--结束END--

本文标题: vue如何切换路由

本文链接: https://www.lsjlt.com/news/110612.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue如何切换路由
    在vue中切换路由的方法:1.新建项目,引入vue和vue-router;;2.使用Vue.use方法注册路由;3.定义路由;4.配置路由;5.使用el-menu-item标签设置路由点击切换;具体步骤如下:首先,在新建一个html项目,并...
    99+
    2022-10-08
  • vue中怎么切换移动端路由
    本篇文章给大家分享的是有关vue中怎么切换移动端路由,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。1. 浏览器导航栏的切换通过记录 历史记录 ...
    99+
    2022-10-19
  • 如何在Vue中实现替换路由而不切换选项卡
    随着前端技术的不断发展,Vue成为了一个非常流行的前端框架。在Vue开发过程中,路由系统是不可或缺的一个重要部分。但是,有时候我们需要在不刷新整个页面的情况下切换路由,同时还需要保持当前选项卡的状态不变。本文将介绍如何在Vue中实现替换路由...
    99+
    2023-05-14
  • Vue中$router.push()路由切换及如何传参和获取参数
    目录1、路由的两种常见方式2、传参和获取参数(query和params)总结 1、路由的两种常见方式 1)声明式: <router-link to="/login"...
    99+
    2023-05-13
    vue $router.push()路由切换 vue路由切换页面 vue 路由切换
  • Vue中怎么实现替换路由而不切换选项卡
    今天小编给大家分享一下Vue中怎么实现替换路由而不切换选项卡的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。什么是Vue路由系...
    99+
    2023-07-06
  • Vue + Vue-router如何实现同名路由切换数据不更新功能
    这篇文章将为大家详细讲解有关Vue + Vue-router如何实现同名路由切换数据不更新功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在默认情况下, 同名路由之间的...
    99+
    2022-10-19
  • vue实现tab路由切换组件的方法实例
    前言 本文介绍的是使用vue自带的vue-router.js路由实现分页切换功能,下面话不多说了,来一起看看详细的实现代码吧 实现图片如下 下列为实现代码 css: *{ ...
    99+
    2022-11-12
  • 如何解决vue-router在同一个路由下切换,取不到变化的路由参数问题
    小编给大家分享一下如何解决vue-router在同一个路由下切换,取不到变化的路由参数问题,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!最近用vue写项目的时候碰到一个问题,在同一个页面下...
    99+
    2022-10-19
  • angular2如何实现路由切换改变页面title
    小编给大家分享一下angular2如何实现路由切换改变页面title,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!angular...
    99+
    2022-10-19
  • Flutter之自定义路由切换动画
    Flutter之自定义路由切换动画 在Flutter中,我们可以通过Navigator来实现路由管理,包括路由的跳转和返回等。默认情况下,Flutter提供了一些简单的路由切换动画,但是有时候我们需要...
    99+
    2023-09-21
    flutter android 动画 职场和发展 学习 经验分享
  • Vue路由切换和Axios接口取消重复请求详解
    目录前言场景解决方案axios中如何取消请求项目中封装使用总结参考前言 在日常前端开发中, 经常会遇到频繁发起的重复请求, 会给服务器及网络造成不必要的压力, 可通过取消重复请求解决...
    99+
    2022-11-13
  • Vue怎么实现鼠标滚轮滚动切换路由效果
    本篇内容主要讲解“Vue怎么实现鼠标滚轮滚动切换路由效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue怎么实现鼠标滚轮滚动切换路由效果”吧!一个根路由组件(app下的根路由组件, 需要滚动...
    99+
    2023-06-20
  • 重启路由切换ip的方法介绍
    本篇内容主要讲解“重启路由切换ip的方法介绍”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“重启路由切换ip的方法介绍”吧!网络设备需要更换IP,我们可以用不止一种方法来处理。通过路由器,我们能改...
    99+
    2023-06-20
  • Vue鼠标滚轮滚动切换路由效果的实现方法
    一个根路由组件(app下的根路由组件, 需要滚动切换的作为其子组件) 在根路由组件添加鼠标滚动时间监听, 在mounted中调用监听 当跳转到其他路由(跳出这个根路由时), 根路由组...
    99+
    2022-11-12
  • 路由器如何换IP
    这篇文章主要介绍了路由器如何换IP,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1.断电源重新启动。如果你忘记了路由器管理密码,甚至不想登录管理界面来设置路由器重启呢?最简单...
    99+
    2023-06-20
  • vue-router路由切换时组件重用挖下的坑怎么解决
    这篇文章将为大家详细讲解有关vue-router路由切换时组件重用挖下的坑怎么解决,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。问题描述:vue-router导航切换 时...
    99+
    2022-10-19
  • React路由动画切换实现过程详解
    目录1.下载2.配置3.引入css4.结合animate库1.下载 cnpm install react-transition-group --save 2.配置 在路由配置文件/s...
    99+
    2022-12-08
    React路由动画切换 React路由切换
  • Vue项目如何实现切换主题色思路
    目录Vue项目切换主题色思路需求实现效果实现思路总结Vue项目切换主题色思路 需求 用户通过取色器选择自己喜欢的颜色,替换项目中的主题色 实现效果 实现思路 在项目中使用的是les...
    99+
    2023-01-13
    Vue主题色 Vue切换主题色 Vue主题色切换
  • 如何解决Vue 路由切换时页面内容没有重新加载的问题
    小编给大家分享一下如何解决Vue 路由切换时页面内容没有重新加载的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!第二次进入页...
    99+
    2022-10-19
  • Vue中$router.push()路由切换、传参和获取参数的方法是什么
    这篇文章主要介绍“Vue中$router.push()路由切换、传参和获取参数的方法是什么”,在日常操作中,相信很多人在Vue中$router.push()路由切换、传参和获取参数的方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作