vue2路由跳转页面

这篇具有很好参考价值的文章主要介绍了vue2路由跳转页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端工作笔记之---页面路由跳转vue2

前言

1.安装vue-router

npm i vue-router

2.配置路由

在src文件夹下创建router文件夹,然后在router文件夹下创建index.js文件,如下图

vue2路由跳转页面

在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路由跳转页面

 在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()文章来源地址https://www.toymoban.com/news/detail-463690.html

      const routeUrl = this.$router.resolve({

        path: "/targetUrl",

        query: { id: 96 },

      });

      window.open(routeUrl.href, "_blank");

    },

到了这里,关于vue2路由跳转页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue3/Vue2】判断设备是移动端还是pc端跳转不同路由router

          APP文件中写入js代码 1、首先,通过 isMobile() 函数判断用户的设备类型。该函数使用正则表达式匹配 navigator.userAgent 字符串,以确定用户是在移动设备上访问网页还是在桌面设备上访问网页 2、然后,在 onMounted() 钩子函数中,根据当前的路由路径来判断是否需要进行重定

    2024年01月16日
    浏览(61)
  • 【vue2第十七章】VueRouter 编程式导航跳转传参(点击按钮跳转路由和如何传递参数)

    如何在js进行跳转路由 在一些需求中,我们需要不用点击a标签或者router-link,但是也要实现路由跳转,比如登陆,点击按钮搜索跳转。那么这种情况如何进行跳转呢? 直接再按钮绑定的方法中写 this.$router.push(\\\'路由路径\\\') 即可。 代码示范 this.$router.push(\\\"/跳转路径\\\") 或者 this

    2024年02月09日
    浏览(41)
  • vue单页面实现路由跳转后保留原页面数据

    有时候在路由跳转后,返回原页面时需要保留之前的数据,即不销毁页面。 页面的缓存,需要用到vue的内置组件keep-alive,来缓存列表页面,同时配合路由选项来更改页面的数据。 在设置keep-alive缓存的组件中,首次进入组件,会一次调用组件的钩子函数:created -- mounted --ac

    2024年02月15日
    浏览(38)
  • VUE路由跳转并刷新页面(框架层实现)

    前言         网上找了很多办法,都需要开发者在页面内单独实现,或者是刷新整个浏览器,感觉并不是特别舒服。因此,我考虑可以在框架层去实现路由跳转刷新。         思路如下:                 1、重定向至临时界面(用户无感知)                 2、打开临时

    2024年02月11日
    浏览(55)
  • Vue项目启动后跳转到制定路由页面

    今天把自己的项目布局完成了,但是想在项目启动的时候默认跳转到登录页面。 这其实需要借助路由实现跳转 开始编写之前,大家可以看下我的布局: 关于如何安装并使用路由,可以参考:Vue安装并使用路由和路由器 需要对index.js进行修改,根据需求配置需要跳转的那个组

    2024年01月18日
    浏览(70)
  • Vue2 +Element-ui实现前端页面

    以一个简单的前端页面为例。主要是利用vue和element-ui实现。 里面涉及的主要包括:新建vue项目、一行多个输入框、页面实现等。   ①首先安装nodejs,这部分在此就不讲啦。 ②然后安装vue-cli: 查看是否安装成功: 安装成功之后就输出vue的版本 ③在cmd窗口新建一个vue2脚手架

    2024年02月16日
    浏览(42)
  • 关于vue路由跳转后的页面不会刷新的解决办法

    做uni项目的时候遇到的情况:1,父组件页面刷新了之后 需要触底加载的子组件能触底加载,否则不能加载。2,子组件不能触底加载,只需要刷新之后就能触底加载。以上的刷新不包括下拉刷新。3. 可能因为包了一层tab页导致跳转进页面没有请求数据的问题。 我的解决办法是

    2024年02月11日
    浏览(61)
  • vue通过router地址传参跳转同一路由页面,页面不刷新的解决办法

    vue、 vue-router@4 记录一下最近遇到的vue路由页面间的跳转的问题,其中就涉及到了不同路由的跳转(/a/b1 = /a/b2)、相同路由不同参数间的跳转(/a/b?c=1 = /a/b?c=2)、相同页面锚点跳转(/a/b#id1 =/a/b#id2) 原因:渲染的是同一组件 解决:可以在不刷新的页面通过监听route,重新加载

    2024年02月04日
    浏览(58)
  • vue-element-admin vue设置动态路由 刷新页面后出现跳转404页面Bug 解决方法

    做项目时遇到的这个bug,因为除了跳404之外也没太大影响,之前就一直放着没管,现在项目基本功能实现了,转头处理了一下,现在在这里记录一下解决方法 这个bug的具体情况是:设置了动态路由之后,不同的用户登录之后显示了不同的侧边栏,在侧边栏点击菜单,渲染对应

    2024年04月28日
    浏览(54)
  • vue3在运行时路由可以正常跳转,但是页面空白,刷新页面恢复正常[已解决]

    vue3在运行时路由可以正常跳转,但是页面空白,刷新页面恢复正常,在网上寻找很久说是keepAlive的原因,后来看了看我的代码~ 原来的代码: 改后的代码: 由此可见,根元素一定要由一个div去包裹住! template必须有且只能有一个div 在这样才会正常显示~ 原理: 这里我们要先

    2023年04月27日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包