位置: 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)

  • 一人在两家公司上班怎么缴纳个税
  • 啥叫反倾销税
  • 应交税费是什么会计科目
  • 购进固定资产的安装费计入原值吗?
  • 增值税有留底怎么减少留底
  • 领取营业执照后30天内没做税务登记
  • 新注册公司实收资本为0
  • 会计发票怎么样粘贴,记账凭证也要粘上吗
  • 结算金额大于合同金额
  • 生产过程半成品报废
  • 车船发票什么样子
  • 小规模纳税人物流服务税率
  • 3%征收率的应税服务
  • 增值税适用范围和税率
  • 监控系统施工费用包括哪些内容
  • 核算错误和重分类错误
  • 现金折扣税务会计
  • 食堂费用没有发票能挂账吗
  • 私营独资企业是小微企业吗
  • 外贸出口退税会计和会计区别
  • 工程安装人工外包合同怎么写
  • 财政拨款的贴息怎么计算
  • 预缴增值税会计处理
  • 暂估入库怎么暂估
  • vagrant 安装centos7
  • win11系统设置快捷键
  • 购销合同违约罚款属什么科目
  • 先付费后收到发票怎么做分录
  • mtask.exe - mtask是什么进程 有什么用
  • php处理大量数据
  • 外经证逾期未核实怎么办
  • php的框架有哪些
  • c++~怎么用
  • 企业出售生产设备能开票吗怎么开
  • 控制系统动力学
  • 结转制造费用用什么科目
  • 解压.xz文件命令
  • php身份证号码验证
  • 针对多用户实现什么功能
  • vgchange命令
  • 发票过期未认证可以用吗
  • 农民专业合作社属于什么企业类型
  • python怎么过滤多余空格
  • rust 前端开发
  • mysql日期和时间类型
  • 退税流程怎么操作个人所得税2022
  • 公司向个人支付居间费用
  • sql将一个表中的值赋给另一个表
  • 发放职工工资是什么支出
  • 出纳属于会计岗位职责吗
  • 预付账款如何结账
  • 取得收入未开具发票
  • 销售折让的红字信息申请表怎么做
  • 卖旧固定资产计入哪个科目
  • 未实现内部交易损益是什么意思
  • 公司赞助学校
  • 无奖有票是什么意思
  • 临时设施科目计入什么
  • 工程完工结算报告范本
  • 违反会计法规定的行为有哪些
  • win1909版本
  • linux搭建gitlab
  • shutdown /f
  • xp的兼容模式
  • regsrv.exe - regsrv是什么进程 有什么用
  • win7系统的磁盘管理在哪里,怎么打开
  • win7和vista的区别
  • 人在国外怎么补办身份证
  • javascriptcall和apply
  • 如何实现仁
  • javascript解决了什么问题
  • android 加载更多
  • javascript学习指南
  • Android4.4 wpa_supplicant深入分析之wpa_supplicant初始化流程
  • android权限管理
  • jquery按钮点击事件
  • js继承的三种方法
  • HTTP之Range理解
  • 北京地税税务总局官网
  • 打税务局电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设