vue路由跳转

原创已于 2023-03-03 10:16:56 修改 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #nuxt.js #router

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

前端专栏收录该内容

13 篇文章

订阅专栏

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

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 会消失