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

  • 来料加工增值税率
  • 企业在异地设立的办事处撤销了,人员咋办
  • 运输货车折旧计算公式
  • 本月发生费用下月收到发票
  • 所有者权益股东权益
  • 企业增资的分录怎么写
  • 营业收入包括投资净收益吗
  • 营业外支出罚款所得税怎么处理
  • 应付余额是负数怎么理解
  • 纳税人销售自产门窗并负责安装
  • 抵扣发票未申报
  • 工会经费支出无效怎么办
  • 收购个人独资企业的税收
  • 员工宿舍需要缴纳房产税么
  • 定额发票有效期是多长时间?你知道吗?
  • 公司注销前怎么平账才不用交税
  • 收到承兑后背书怎么处理
  • 租房押金收不回来怎么做账
  • 实物捐赠的企业有哪些
  • 进口货物完税价格名词解释
  • 怎么简单快速的辨别是铝是锡
  • 二手车买卖如何纳税
  • 为职工缴纳的意外保险费用
  • 所得税年报能撤销吗
  • 公司车过户给个人流程
  • win7如何打开管理员权限
  • vue前端代码实例
  • 如何弥补以前年假的问题
  • 工程完工后有关工作总结
  • 生产费用在完工产品和在产品之间
  • conda配置虚拟环境
  • javascript动画教程
  • 带有折扣的增值税怎么算
  • 汽车维修费发票怎么开
  • 取得进项税发票什么时期内可以抵扣
  • 织梦怎么用模板建站
  • 发票明细怎么导出数量
  • 所得税时间性差异
  • 母公司破产子公司债权人申报
  • 自产农产品免征个人所得税吗
  • 个体户经营餐饮怎么申报
  • 收保险公司工伤怎么赔偿
  • 分包工程款的账务处理
  • sql server查询语句大全讲解
  • 合伙人资本属于个人资本吗?
  • 对公账户里的钱怎么转出来合法
  • 为什么出口退税率低于适用税率
  • 当月未取得发票的费用怎么入账
  • 油卡充值做账
  • 交易性金融资产包括哪些项目
  • 公司购入二手车没有发票怎么入账
  • 企业经营规模小怎么办
  • sql server触发器的编写与使用
  • vmware虚拟机无法打开内核设备怎么办
  • 如何替换图片中的文字
  • mac进去不了系统
  • u盘背景图片设置方法
  • win7系统IE浏览器打开跳转到360浏览器,怎么阻止
  • w10 2021年更新
  • win10系统自带浏览器在哪里
  • 无法启动.dll
  • win10无法升级系统
  • linux的虚拟终端有几个
  • 基于jQuery的设计与实现
  • unity shader lerp
  • js判断手机号
  • unity屏幕截图
  • python 数据处理 pdf
  • unity uishader
  • vue导航组件
  • shell中echo命令详解
  • 批处理是什么
  • shell 批量改名
  • jquery原理解析
  • javascript电商项目
  • 全面解析A型天秤座男
  • 如何查询企业税务评级
  • 怎么向税局举报
  • 求资金占用利息的公式
  • 重庆电子税务局怎么开电子发票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设