vue设置html自动跳转路由,vue路由跳转的三种方式是什么？

本教程操作环境：windows7系统、vue2.9版，适用于所有品牌电脑。

vue中通过路由跳转的三种方式

router-view 实现路由内容的地方，引入组件时写到需要引入的地方，

需要注意的是，使用vue-router控制路由则必须router-view作为容器。

通过路由跳转的三种方式

1、标签路由 router-link 【实现跳转最简单的方法】

this.$router.push({name:'Home'})

this.$router.push({path:'/home'})

2、传参

this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name

// params传参数

// 路由配置 path: "/home/:id"

// 不配置path ,第一次可请求,刷新页面id会消失

// 配置path,刷新页面id会保留

// html 取参 $route.params.id

// script 取参 this.$route.params.id

this.$router.push({name:'Home',query: {id:'1'}})　　this.$router.push({path:'/home',query: {id:'1'}})

// query传参数 (类似get,页面url后面会显示参数)

// 路由可不配置

// html 取参 $route.query.id

// script 取参 this.$route.query.id

3、this.$router.replace()

用法同上：this.$router.push()

ps : 区别

this.$router.push

跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace

跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)