1: 不带参数
  this.$router.push('/home');
  this.$router.push({name: 'home'});
  this.$router.push({path: '/home'});

2: query 携带参数
   this.$router.push({name: 'home', query: {id: '1'});
   this.$router.push({path: 'home', query: {id: '1'});
   取参数: $router.query.id
   取参数: this.$router.query.id
   
3: 传递参数: 传参
    this.$router.push({name: 'home', params: {id: '1'}});
    路由配置参数: path: "/home/:id"  或者 path: "/home:id"
    不配置path:  刷新页面id可能会消失。
    html 取 $router.params.id
    script: 脚本取参: $this.$router.params.id;

4: query 和 params 的区别:
   query 类似于get, 跳转页面之后, ur了参数后边会拼接参数, 类似: id=1; 非常重要性这样可以传下去, 密码之类还是用params 刷新页面id 还是存在到但是 params 类似post 请求, 跳转页面之后, url不会拼接参数, 但是刷新页面id 会消失。

5: this.$router.go(n);
   向前或者向后跳转n个页面,  n 可以为正整数也可以为负整数

   this.$router.push() 的区别:
   跳转到指定的url路径, 并想history 栈中添加一个记录, 点击后退会返回到上一个页面。

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

   this.$router.go(n);
   向前或者向后跳转n个页面, n 可以为正整数或者负整数。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐