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

  • 公司注销前存货低价标准
  • 房产契税什么时候交的小知识
  • 详述关税的种类和征收方法
  • 企业所得税纳税人
  • 独资企业的个人所得税怎么缴纳
  • 已付工资在资产负债表中体现
  • 生产车间计提折旧分录
  • 费用类发票怎么做账
  • 集体土地上的不动产证已经能查询为何房产证拿不到
  • 个体户需要缴纳残疾人保障金吗
  • 危险废物处理费用发票怎么开
  • 个人转让住房要交哪些税费?
  • 主营业务成本结转方法
  • 减半征收城建税文件
  • 土地使用税每个月都要计提吗
  • 收到未知款项如何做账
  • 发票代码会有一样的吗
  • 什么经营范围可以开培训费
  • 税盘没反应
  • 电费发票和实际交的钱不一样怎样支付
  • 销售费用有哪些?
  • 投资新公司的账务处理
  • PHP:oci_set_client_info()的用法_Oracle函数
  • 归还银行借款摘要模板
  • 贴现息等于什么
  • unity导出webgl报错
  • 公司房产税如何征收税率
  • php image
  • yolov5模型中git的作用
  • windows安装无法继续,若要安装请重新启动
  • 公司的财产保险包括哪些
  • nginx配置文件格式
  • 运输费计税吗
  • 与http缓存有关的header
  • 命令查看系统信息
  • 下列关于纳税人发生兼营行为
  • 发票税额打印不全可以入账吗
  • 进项税抵增值税
  • java将整数转化为数组
  • 无退税产品出口征税
  • 实收资本印花税税率
  • SQL server 2008中的数据库能否只包含数据文件
  • 金税盘全额抵扣申报表怎么填
  • 小规模纳税人个体户经营所得税怎么算
  • 有哪些发票可以报销
  • 建筑业 成本
  • 会计凭证的做账原则
  • 转账支票转账需要带什么
  • 普票与专票有什么区别报销
  • 管理费用包括哪些
  • 用友t3财务通普及版如何开下年账
  • 进口货物只有报关单能入账吗
  • 土地出让的钱归谁
  • 私营企业固定资产法律制度
  • 保险公司的业务分为
  • freebsd使用wifi
  • docker 自启动
  • vtpwsr
  • 右下角小喇叭调不了声音
  • window 启动
  • win10 20h2体验
  • centos7文件路径
  • 桌面上有desktop.ini文件
  • linux阅读器
  • 手动为LiteSpeed安装eAccelerator和XCache的方法分享
  • iptables -z
  • win10禁止显卡驱动自动安装
  • opencv轻松入门
  • ndk sdk
  • lessons there是什么意思
  • python获取命令行执行命令的输出
  • jqurey+Jscex打造游戏力度条
  • jquery jsonview
  • node.js的概念
  • python正则\b
  • 完美世界3v3
  • 河北发票查询真伪查询
  • 江西国家税务局官网
  • 国税地税征管体制改革方案全文
  • 火药概念股有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设