vue 路由跳转方式的几种方法

1.什么是路由

路由的单词是router

在前端帮助我们进行页面之间的跳转

router-Link就相当于是 a 链接 to 属性规

定跳转到那个路径

知道跳转到那个页面后 还学要配置路由规则 规定那个路径下加载那个组件 router/index

需要一个坑加载页面

2.路由跳转的两种方式

1.router-Link 帮助我们跳转页面

2.编程式导航 就是用 js 的代码实现路由跳转

this.$router.push("/page")

完整写法是一个大括号 里面可以用path 也能用name跳

this.$router.push({path:"/page"})

this.$router.push({name:"page"})

还有方法叫做

 this.$router.replace()

这个方法不保留历史记录

3.路由的传参

在跳转路由的时候我们可以携带一个参数传递

我们再跳转一个页面的时候可以携带一个信息 这个页面拿到信息 就能判断是从哪里跳转的一般传id值

路由的传参有三种：

第一种是query

在列表页传：

this.$router.push({path:"/detail",query:{id:id}})

在详情页接收：

在data里定义

id:this.$route.query.id

第二种是params

在列表页传：

this.$router.push({name:"detail",params:{id:id}})

这里只能name跳转

在详情页接收

id:this.$route.params.id

第三种是动态路由传参这里就不说了。。

4.

$router是路由的实例对象 有跳转的方法 比如说push go

$route是路由的信息对象 有路径 有name还有参数

还有两个返回上一页用到的跳转‘

this.$router.back()

或

this.$router.go(-1)