一、vue-router路由跳转分为两大类
- 编程式的跳转：router.push
- 声明式的跳转：<router-link>
二、编程式的跳转分为三种
1、this.$router.push("detail")：detail为要跳转的路由地址，该方式简单但无法传递参数。
2、this.$router.push({name:"detail",params:{personId:33}})：detail为要跳转的路由地址，params为传递的参数，目标页面可以使用this.$route.params.personId来获取传递的参数，该方式有一个缺点就是在目标页面刷新时传递过来的参数会丢失。
3、this.$router.push({path:"/detail",query:{personId:33}})：detail为要跳转的路由地址，query为传递的参数，目标页面使用this.$route.query.personId来获取传递的参数，该方式会把传递的参数放在url上，如：localhost:8080/#/detail/?personId=33。（该方式也称为地址栏传参）
注意！！！
获取参数是 this.$route.query.** 或者this.$route.params.****
使用this.$router.query.**/params.***是无法获取到参数的
三、声明式的跳转分为三种（优缺点与编程式相同）
- <router-link to="detail">跳转到详情页</router-link>
- <router-link :to="{name:'detail',params:{personId:33}}">跳转到详情页</router-link>
- <router-link :to="{path:'/detail',query:{personId:33}}">跳转到详情页</router-link>
https://www.leftso.com/article/814.html
相关文章
vue-router 中 routers 定义写法,讨论 require 的使用与否首先上 routerindex.jsimport Vue from 'vue'import Router f...
Vue 如何返回上一页（上一个锚点）//...省略
methods:{
goback:function(){
this.$router.go(-1);//...
在初始化的Vue项目中，我们最先接触到的就是main.js，App.vue，index.html这三个文件，从下面创建的一个空白项目中可以看到：关于三个文件的说明如下：index.html---主页
meta字段（元数据）直接在路由配置的时候，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作