vue如何通过router-link或者button跳转到一个新的页面

 更新时间:2022年10月12日 10:51:32   作者:chainbees  
这篇文章主要介绍了vue如何通过router-link或者button跳转到一个新的页面,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

通过router-link或者button跳转到一个新的页面

a、商品列表页面如下(点击'跳转到购物车页面'就会跳到一个新的页面,而不是在同一个页面加载一个组件)

<template>
  <div>
    这是商品列表页面
    <router-link to='/goods/title'>显示商品标题</router-link>
    <router-link to='/goods/image'>显示商品图片</router-link>
    // 跳转到购物车页面
    <router-link to='/cart'>跳转到购物车页面</router-link>
     <button @click="jump">Button-跳转到购物车页面</button>
    <div>
        <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      msg: ''
    }
  },
  methods: {
    jump(){
    //this.$router.push("/cart")
    //传递的参数用{{ $route.query.goodsId }}获取
    this.$router.push({path: '/cart?goodsId=12'})
    //this.$router.go(-2)
    //后退两步
    }
  }
}
</script>
 
<style>
</style>

b、通过<router-link>方法还需要修改路由文件src/router/index.js,其他方法不用看了 

import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
// 2、导入Cart组件
import Cart from '@/views/Cart'
 
Vue.use(Router)
 
export default new Router({
  mode: 'history',
  routes: [
    {
          path: '/goods',
          name: 'GoodsList',
          component: GoodsList,
          children: [
              {
                    path: 'title',
                  name: 'title',
                  component:Title    
              },
 
              {
                    path: 'image',
                  name: 'image',
                  component:Image    
              }
          ]
    },
    // 1、写入购物车组件
    {
        path: '/cart',
          component: Cart,
    }
  ]
})

vue跳转到一个新的页面的多种方法

通过router-link或者button或者a链接的方法

1、router-link路由

<router-link :to="{ path: '/a/b' }"
       // tag="button"  //作为一个按钮,样式得自己再写一下,不方便,请选用第二种方式
          >查看当前排名</router-link
        > 

其中/a/b为router路由的路径

2、button按钮 

<el-button type="primary" icon="el-icon-search" @click="querySort"
          >查看当前排名</el-button
        >
querySort(){
this.$router.push({ path: "/a/b" });
}

3、a链接

<a :href="exportDistrict" rel="external nofollow"  class="filter-item el-button el-button--success"
          >导出游戏区服</a
        >
     data() { return{   exportDistrict: "/a/b",}}

选用哪种方式自己决定;

另:如果在方法中跳转一个页面,比如错误页,使用方法如下:

if (res.code === 1002) {
        //无权限统一处理
        loadPage("/error");
        return;
      }
      
// 跳转、重定向
const loadPage = (url, reject) => {
  if (reject) {
    return reject(url);
  }
  window.$$vm.$router.push(url);
};

main.js中:

window.$$vm = new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中extends继承和组件复用性详解

    Vue中extends继承和组件复用性详解

    这篇文章主要给大家介绍了关于Vue中extends继承和组件复用性的相关资料,组件(Component)是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,需要的朋友可以参考下
    2023-11-11
  • vue项目使用uniapp生成app的全过程

    vue项目使用uniapp生成app的全过程

    这篇文章主要介绍了vue项目使用uniapp生成app的全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 解决VantUI popup 弹窗不弹出或无蒙层的问题

    解决VantUI popup 弹窗不弹出或无蒙层的问题

    这篇文章主要介绍了解决VantUI popup 弹窗不弹出或无蒙层的问题。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue3中reactive和ref函数及对比分析

    vue3中reactive和ref函数及对比分析

    这篇文章主要介绍了vue3中reactive和ref函数及对比,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • 详解如何优雅运用Vue中的KeepAlive组件

    详解如何优雅运用Vue中的KeepAlive组件

    在Vue中,KeepAlive组件是一种特殊的组件,用于缓存已经渲染过的组件实例,本文主要为大家详细介绍了KeepAlive组件的用法,需要的小伙伴可以参考下
    2023-09-09
  • Vue3中v-if和v-for优先级实例详解

    Vue3中v-if和v-for优先级实例详解

    Vue.js中使用最多的两个指令就是v-if和v-for,下面这篇文章主要给大家介绍了关于Vue3中v-if和v-for优先级的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue3的setup在el-tab中动态加载组件的方法

    Vue3的setup在el-tab中动态加载组件的方法

    公司某项目需求在页面显示的组件是根据角色变化而变化的,怎么实现这个效果呢,下面小编给大家介绍下Vue3的setup在el-tab中动态加载组件的方法,需要的朋友可以参考下
    2022-11-11
  • vue使用pdfjs-dist+fabric实现pdf电子签章的思路详解

    vue使用pdfjs-dist+fabric实现pdf电子签章的思路详解

    最近领导提了一个新需求:仿照e签宝,实现pdf电子签章,本文给大家介绍vue使用pdfjs-dist+fabric实现pdf电子签章的思路,感兴趣的朋友一起看看吧
    2023-12-12
  • vue高德地图JS API实现海量点标记示例

    vue高德地图JS API实现海量点标记示例

    本文主要介绍了vue高德地图JS API实现海量点标记示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue elementUI select下拉框如何设置默认值

    vue elementUI select下拉框如何设置默认值

    这篇文章主要介绍了vue elementUI select下拉框如何设置默认值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论