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

  • 租赁服务增值税税率
  • 一般纳税人购买二手车可以抵扣嘛
  • 发给员工的福利费可以全部税前抵扣吗
  • 专票不抵扣认证什么意思
  • 软件企业认定流程
  • 税务报表的利润表
  • 企业所得税营业收入是含税还是不含税
  • 免交附加税政策
  • 办公家具可以一次性税前扣除吗
  • 中药饮片增值税税率
  • 企业垃圾处理费计入什么科目
  • 残值要不要做分录
  • 非贸易付汇去银行汇款流程
  • 融资租赁业务的账务处理
  • 以无形资产投资入股缴纳哪些税收
  • 监理费可以由施工方出吗
  • 工程设备租赁带什么手续
  • 公司开出的经济补偿金可以税前扣除吗
  • 法律责任的具体内容
  • 免税和不征税货一样吗
  • 买烟酒开专票可以抵税吗
  • 住宿费的普通发票怎么开
  • 关于开票时纳税的规定
  • 银行异地汇款抽奖需要扣缴个人所得税吗?
  • 个人所得税的标准有几档
  • 发票连号不许报销吗
  • 机械租赁费如何入账科目
  • 苹果手机耳返功能怎么关闭
  • 期末未抵扣数
  • 本月暂估成本的会计分录
  • 出口转内销会计账务处理
  • 个人所得税计提和发放分录
  • 明细账是什么样子
  • linux入门学习
  • 加拿大克卢恩国家公园
  • 一般纳税人增值税优惠政策2023
  • wordpress登录注册
  • php 表单
  • wordpresscom
  • 解决跨域问题的注解
  • thinkphp框架怎么用
  • 在建工程完成后转入什么科目
  • 表单验证用什么方法实现
  • CV攻城狮入门VIT(vision transformer)之旅——VIT原理详解篇
  • ajax可以在静态页面
  • 基金管理人应当自与基金销售机构签订销售协议之日起
  • 专票地址错了要作废吗
  • 企业自建房出售给员工个人后还需要缴纳土地使用税么
  • 销售不同商品的会计分录
  • 营业税改增值税的背景
  • 应付票据是供应商往来吗
  • 树结构ADT知识点思维导图
  • 国有土地租赁合同的性质
  • 可转债可以不卖吗
  • 个体户跨季领取发票流程
  • 中付支付科技有限公司备付金
  • 财务报表与财务分析的关系
  • 日后调整事项的记账凭证怎样装订
  • 固定资产清理营业外支出可在税前扣除?
  • 房租押金不退如何处理
  • 收到退回多付的材料退款
  • 医疗器械销售能一年挣一百万么
  • 为什么要用支票取钱
  • 怎么样创建
  • MSSQL 2005/2008 日志压缩清理方法小结
  • xp系统如何安装
  • win8怎么看windows
  • win8.1死机卡住不动
  • mac怎么把两个盘弄成一个盘
  • css布局的经典网站
  • nginx优雅退出
  • vue list清空
  • 安卓模拟器错误怎么办
  • android保存网络图片
  • JavaScript File API文件上传预览
  • 第一个javascript程序
  • 解读高考作文
  • js面向对象写法
  • 深圳市税务局好考吗
  • 粮食部门是不是国家机关
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设