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

  • 吸收合并需要编制报表吗
  • 社保利息计入什么科目
  • 损益表上的数据怎么看
  • 古董卖给公司
  • 收到货物记账凭证
  • 总公司给分公司开发票
  • 所得税预提多了怎么处理
  • 冲回多提所得税
  • 公司买卖股票如何账务处理
  • 融资租赁租金收入计税基础
  • 租车服务的税率
  • 增值税申报金额含税吗
  • 代开专用发票缴纳的增值税需要计提吗?
  • 资产处置税务风险有哪些
  • 公司食堂买菜入什么科目
  • 零申报企业所得税
  • 合伙创业如何分配财产
  • 个税扣缴端如何删除员工信息
  • 转让技术所有权是什么收入
  • 总资产报酬率怎么查
  • 建筑公司能否开材料票
  • 电脑管家系统异常要修复吗
  • mac怎么创建icloud
  • linux怎么操作
  • linux系统添加静态路由命令
  • 长期股权投资转出账务处理
  • 酒店采购布草如何入账
  • cmt.exe病毒
  • 贸易公司出口退税政策最新
  • 利息收入增值税确认时点
  • 橡皮树的养殖方法视频教程
  • three.js入门指南
  • yii框架运行原理
  • 收到某单位投入一批原材料
  • yolo v5 可视网络结构
  • easyposer怎么导出
  • 购入库存商品会计分录摘要
  • 哪些收据可以入账且可以税前抵扣
  • 注销的公司需要清算吗
  • 预付卡做账吗
  • 钢贸企业税收怎么算
  • 办理对公账户时间
  • 公司账务不正规,账务外包的,财务助理有风险吗
  • 工业企业的会计核算程序
  • 用mysql的小技巧
  • 结转收入及成本费用
  • 购入产品用作样品怎么做
  • 用白纸写的收据怎么入帐?
  • 税率由16%变更为13怎么算
  • 销售合同的印花税由谁交
  • 生育保险基金的筹集原则是
  • 公交车ic卡网上充值
  • 非税收入定额票据是什么
  • 营业收入影响资产负债表哪些项目
  • 防止服务器断电
  • 目前默认系统%1
  • 纸嫁衣6第四章攻略全文图解
  • 硬盘安装windows11
  • windows server 2008 r2最大支持内存
  • window10打开rar文件
  • ubuntu虚拟机apt安装tools
  • linux中的挂载命令
  • Linux httpd(apache)启动失败 解决办法
  • win8怎么安装不了win10
  • macbookpro移到废纸篓快捷键
  • linux shell脚本实例
  • win8 应用商店
  • win8系统教程
  • kinect unity开发
  • cocos2dx怎么用
  • Bullet之了解Force Torque Impulse
  • shell脚本一百例
  • 基于vue的ui框架
  • javascript要怎么学
  • jquery mobile demo
  • js解析json字符串获取key
  • 小规模纳税人土地使用税减免政策
  • 贵州省电子税务
  • 国家税务总局服务中心
  • 中国税务的核心价值观是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设