vue路由跳转

HYQ_java

已于 2023-03-03 10:16:56 修改

阅读量2.4k

点赞数

分类专栏：前端文章标签： vue.js nuxt.js router

于 2021-12-29 15:11:08 首次发布

本文链接：https://blog.csdn.net/HYQ_java/article/details/122211201

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js框架中Nuxt Link组件和Vue Router的使用方法，包括如何进行页面跳转、传递参数，以及push、replace、go等不同导航方式的区别。同时，讲解了query和params在页面跳转中的应用，以及如何打开外部链接。对于前端开发者来说，这是理解Vue应用中路由操作的重要参考。

摘要由CSDN通过智能技术生成

html中进行设置

//不带参数
<nuxt-link to="/companyProfile#goQyjj" target='_blank' tag="a"></nuxt-link>
<nuxt-link :to="{path:'/home'}" target='_blank'>
<nuxt-link :to="{name:'/home'}" target='_blank'>
//带参数
<nuxt-link :to="{ path: '/home/media',query:{category_id:1}}" target='_blank' tag="a">

js进行路由跳转

一、push:跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
//不带参数
this.$router.push({path:'/home/news'});
//带参数
this.$router.push({path:'/home/news',query:{news_id:news_id,visit_flag:1}});
this.$router.push({path:'/home/news',params:{news_id:news_id,visit_flag:1}});

//通过name跳转
    openNew(name, id) {
        this.$router.push({
        name: name,
        query: {
          id: id
        }
      })
    },

二、replace用法同push一样,跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.replace() 

三、go向前或者向后跳转n个页面，n可为正整数或负整数 
this.$router.go(n)

注意：query和params区别

query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在

params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失