位置: IT常识 - 正文

vue2路由跳转页面(vue2路由跳转页面不刷新问题)

编辑:rootadmin
vue2路由跳转页面

推荐整理分享vue2路由跳转页面(vue2路由跳转页面不刷新问题),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue2路由跳转页面刷新,路由没有变化,vue2路由跳转页面刷新,路由没有变化,vue路由跳转的三种方法,vue的路由跳转了,可是页面还在当前页,vue2路由跳转页面不显示,vue2路由跳转页面不显示,vue2路由跳转页面,vue2路由跳转页面不刷新问题,内容如对您有帮助,希望把文章链接给更多的朋友!

前端工作笔记之---页面路由跳转vue2

前言

1.安装vue-router

npm i vue-router

2.配置路由

在src文件夹下创建router文件夹,然后在router文件夹下创建index.js文件,如下图

在index.js文件夹中进行配置

import Vue from 'vue'import VueRouter from 'vue-router'// 导入一级路由import Goods from '@/views/Goods'import Particulars from '@/views/Particulars'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/goods' }, { path: '/goods', name: 'goods', component: Goods, }, { path: '/particulars', name: 'particulars', component: Particulars }]const router = new VueRouter({ routes})export default router

 在src文件夹下创建view文件夹,在里边放路由文件,如下图

vue2路由跳转页面(vue2路由跳转页面不刷新问题)

 在main.js文件中注册路由

import router from '@/router/index.js'new Vue({ render: h => h(App), router}).$mount('#app')

接下来就是使用啦

一、单页面路由跳转

首先强调一点,使用路由跳转需要放置路由挂载点<router-view></router-view>,放置在你需要显示的地方。

这里我将挂载点放置在App.vue中了

<template> <div id="app"><router-view></router-view> </div></template>

1.使用<router-link></router-link>的方式进行跳转

<router-link :to="{ path: '/particulars'}">跳转</router-link>

2.使用this.$router.push()的方式进行跳转

<el-button type="text" size="small" @click="toEdit()">编辑</el-button>methods: { toEdit() { this.$router.push({ path: '/particulars' }) }, },

this.$router.replace(),用法同上。

二、跳转到新页面(打开一个新窗口)

1.<router-link></router-link>

<router-link target="_blank" :to="{ path: '/catalog', query: { id: '1' } }" >打开新的标签页</router-link>

2.this.$router.push()

const routeUrl = this.$router.resolve({ path: "/targetUrl", query: { id: 96 }, }); window.open(routeUrl.href, "_blank"); },
本文链接地址:https://www.jiuchutong.com/zhishi/296025.html 转载请保留说明!

上一篇:web自动化测试进阶篇02 ——— BDD与TDD的研究实践(web自动化测试方法)

下一篇:html/javascript实现简单的上传(html+javascript)

  • 微信怎么设置视频打不进来(微信怎么设置视频来电铃声)

    微信怎么设置视频打不进来(微信怎么设置视频来电铃声)

  • 微视最长发几分钟视频呢(微视最多能发多长的视频)

    微视最长发几分钟视频呢(微视最多能发多长的视频)

  • 一加8支持光学防抖的吗(一加支持光学防抖吗)

    一加8支持光学防抖的吗(一加支持光学防抖吗)

  • 手机正在录音怎么隐藏(手机正在录音怎么取消掉)

    手机正在录音怎么隐藏(手机正在录音怎么取消掉)

  • 短视频变现的方式分别有什么(短视频变现的方向)

    短视频变现的方式分别有什么(短视频变现的方向)

  • icloud家庭共享别人会看到你的信息吗(苹果icloud家庭共享以后资料会弄混吗)

    icloud家庭共享别人会看到你的信息吗(苹果icloud家庭共享以后资料会弄混吗)

  • 为什么笔记本摄像头黄黄的(为什么笔记本摄像头打开是黑的)

    为什么笔记本摄像头黄黄的(为什么笔记本摄像头打开是黑的)

  • qq删除记录另一个手机会不会出现(qq聊天记录删除后对方能看到吗)

    qq删除记录另一个手机会不会出现(qq聊天记录删除后对方能看到吗)

  • 电脑主板自带的声卡怎么样(电脑主板自带的wifi天线)

    电脑主板自带的声卡怎么样(电脑主板自带的wifi天线)

  • 飞行模式短信会延迟吗(飞行模式短信会提示吗)

    飞行模式短信会延迟吗(飞行模式短信会提示吗)

  • 黑莓如何下载应用(黑莓手机怎么下载应用宝)

    黑莓如何下载应用(黑莓手机怎么下载应用宝)

  • 苹果6什么处理器(苹果6什么处理器相当于安卓什么处理器)

    苹果6什么处理器(苹果6什么处理器相当于安卓什么处理器)

  • 华为mate30还是京东方屏幕吗(华为mate 30和)

    华为mate30还是京东方屏幕吗(华为mate 30和)

  • 京东是什么网站(京东商城是什么网站)

    京东是什么网站(京东商城是什么网站)

  • 探探不充钱能配对吗(探探不充钱能约到人吗)

    探探不充钱能配对吗(探探不充钱能约到人吗)

  • 抖音开小店的条件(抖音开小店的条件是什么)

    抖音开小店的条件(抖音开小店的条件是什么)

  • 苹果手表怎么充电(苹果手表怎么充不进去电)

    苹果手表怎么充电(苹果手表怎么充不进去电)

  • 如何用excel制表(如何用excel制表制作制衣牛仔裤的仓库表)

    如何用excel制表(如何用excel制表制作制衣牛仔裤的仓库表)

  • 加人微信来源怎么隐藏(加人微信来源怎么查)

    加人微信来源怎么隐藏(加人微信来源怎么查)

  • qq相册回收站独立密码是什么(qq相册回收站独立密码多少)

    qq相册回收站独立密码是什么(qq相册回收站独立密码多少)

  • 格式工厂无法定位程序输入点(格式工厂失败)

    格式工厂无法定位程序输入点(格式工厂失败)

  • 怎么发抖音视频(怎么发抖音视频才能上热门)

    怎么发抖音视频(怎么发抖音视频才能上热门)

  • ps啥意思是什么(ps,什么意思?)

    ps啥意思是什么(ps,什么意思?)

  • 华为怎么照片移到隐私空间(华为怎么把照片移动到另一个手机)

    华为怎么照片移到隐私空间(华为怎么把照片移动到另一个手机)

  • 京东白条如何提现(京东白条如何提前还款一部分)

    京东白条如何提现(京东白条如何提前还款一部分)

  • 系统提示IP地址冲突怎么办(电脑网络提示ip地址错误怎么办)

    系统提示IP地址冲突怎么办(电脑网络提示ip地址错误怎么办)

  • ausearch命令  检索审计记录(auth命令)

    ausearch命令 检索审计记录(auth命令)

  • 专利年费滞纳金计入什么科目
  • 开票可以只开大数据吗
  • 个人所得税0申报表怎么填
  • 增值税起征点的规定只适用于
  • 工程收入开票
  • 收到生育津贴会计分录怎么做
  • 跨年的材料专票怎么做会计分录?
  • 固定资产账实不符的审计定性
  • 提供有形动产租赁服务适用税率为13%
  • 净利润提盈余公积
  • 企业购买房产可以抵扣增值税吗
  • 年终奖和工资个人所得税计算器
  • 打印机的增值税率
  • 增值税专用发票税率
  • 代开的发票没有打印怎么作废
  • 卷烟消费税税率表
  • 发票作废什么时候生效
  • 房地产开发项目土地使用权的取得方式
  • 收到融资租赁发票怎么做账
  • 关联业务往来年度报告表
  • 税优识别码是纳税人识别号吗
  • 应收账款怎么登账
  • 外贸企业进项税额抵扣证明
  • 在电脑中设置一键换机
  • 接受捐赠的固定资产可以入账依据是哪些?
  • 会计分录的书写规范
  • win7纯净版系统之家
  • 肚子胀气怎么办 4个方法快速排气很轻松
  • 下一页分页符中间空白页
  • framework怎么用
  • php数组中某个元素出现的个数
  • php 冒泡
  • vuexy
  • 原生php和框架php的区别
  • 坏账准备的会计分录怎么写
  • 小规模纳税人怎么核定税种
  • 成品油电子普通发票如何入账
  • 彩钢板房税点
  • java中的常量是什么意思
  • 软件行业的成本核算
  • 企业的纳税申报数据来源于
  • 平行结转分步法各步骤的费用
  • 累计折旧计提会计分录
  • 发放个税返还用不用申报
  • 以前年度损益调整怎么做账
  • 车户过户
  • 所得税弥补以前年度亏损是几年
  • 建筑安装业经营范围
  • 货代是否负责损失
  • 物业公司预收的物业费怎么做账
  • 收到银联代收短信
  • 哪个行业的会计最难
  • 非营利医疗机构免征哪几种税
  • 账务处理程序和财务处理程序
  • mysqlbinlog -vvv
  • mysql无法创建函数
  • VMWare linux mysql 5.7.13安装配置教程
  • DBCC CHECKIDENT 重置数据库标识列从某一数值开始
  • 如何在mysql显示当前用户
  • services.exe修改注册表
  • mac怎么使用自动切换输入法
  • freebsd常用命令
  • linux查看磁盘io负载
  • win7系统英雄联盟黑屏
  • jquery判断div是否显示
  • 路径可分为
  • easyui选项卡
  • shell脚本-ge
  • python中迭代器的作用
  • 台湾 游戏论坛
  • javascript开发自学
  • 关于使用RequestWindowFeature为啥一定要在setContentView之前调用
  • 套接字java
  • unity中滚动条控件详解
  • 日本消费税是什么
  • 如何给税务局提供发票
  • 个人经营所得税怎么做账务处理
  • 如何做好税务局长
  • 增值税可以抵扣多少
  • 宁波购房契税退税条件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设