vue跳转页面的几种方法(推荐)

  

vue跳转不同页面的多种方法

  

1: router-link跳转
  

        & lt; !——直接跳转——比;   & lt; router-link='/testDemo '比;   & lt; button>点击跳转2 & lt;/button>   & lt;/router-link>      & lt; !——带参数跳转——比;   & lt; router-link:="{路径:“testDemo”,查询:{setid: 123456}}”在   & lt; button>点击跳转1 & lt;/button>   & lt;/router-link>      & lt; router-link:="{名称:testDemo,参数:{setid: 1111222}}”在   & lt; button>点击跳转3 & lt;/button>   & lt;/router-link>      

2:这个。美元router.push ()

        & lt; template>   & lt; div id=安馐浴北?   & lt;按钮@click=癵oTo()”在点击跳转4 & lt;/button>   & lt;/div>   & lt;/template>   & lt; script>   出口默认{   名称:“测试”,   方法:{   转到(){//直接跳转   美元。router.push ('/testDemo ');//带参数跳转   美元。router.push({路径:/testDemo,查询:{setid: 123456}});   美元。router.push({名称:“testDemo”,参数:{setid: 111222}});   }   }   }   & lt;/script>      

参数和查询传参数有什么不一样? ?在地址栏中可以看的到,params传参数时,地址栏中看不到参数的内容,有点像ajax中的帖子传参,查询传参数时,地址栏中可以看到传过来的参数信息,有点像ajax的个体传参

  

如果单独传setId一个参数的时候,地址栏中的地址如下图:

  

 vue跳转页面的几种方法(推荐),

  

,,第一种方式:路径-查询传参

  

 vue跳转页面的几种方法(推荐)

  

,第二种方式:姓名- params传参数

  

但是一般情况下,传参数是传递一个对象,当传递的是一个对象的时候,地址栏中的地址如下图:

  

 vue跳转页面的几种方法(推荐),

  

,,第一种方式:路径-查询传参

  

 vue跳转页面的几种方法(推荐),

  

,,第二种方式:姓名- params传参数

  

3:标签可以跳转么? ?可以跳转外部链接,不能路由跳转

  

<代码> & lt; a href=" https://www.baidu.com "祝辞& lt; button>点击跳转5 & lt;/button> & lt;/a>

  

接收方怎么接收参数? ? <代码>。美元route.query.serid和。美元route.params.setid>   

注意接收参数时是路线不美元是美元router 

        & lt; template>   & lt; div>   testDemo {{。$ route.query.setid}}   & lt;/div>   & lt;/template>      

  

Vue: router-lin         & lt; router-link="/"祝辞(跳转到主页]& lt;/router-link>   & lt; router-link="/登录"祝辞(登录]& lt;/router-link>   & lt; router-link="/注销”祝辞(登出]& lt;/router-link>   之前      

。美元router.push (“/?;

        & lt;按钮@click=白弊4?跳转到主页]& lt;/button>   出口默认{   名称:“应用程序”,   方法:{//跳转页面方法   转转(){   router.push美元。(“/?;   },   }      

。美元router.go (1),
  

        & lt;按钮@click=" upPage "祝辞(上一页]& lt;/button>   & lt;按钮@click=" downPage "祝辞(下一页]& lt;/button>   upPage () {//后退一步记录,等同于history.back ()   router.go美元。(1);   },      downPage () {//在浏览器记录中前进一步,等同于history.forward ()   router.go美元。(1);   }      

代码示例:

        & lt; template>   & lt; div id=坝τ谩北?   & lt; img src=" https://www.yisu.com/zixun/assets/logo.png "比;   & lt; router-view/比;   & lt; router-link="/"祝辞(跳转到主页]& lt;/router-link>   & lt; router-link="/登录"祝辞(登录]& lt;/router-link>   & lt; router-link="/注销”祝辞(登出]& lt;/router-link>      & lt; !——javascript跳转页面——比;   & lt;按钮@click=白弊4?跳转到主页]& lt;/button>      & lt; !——回到上一页——比;   & lt;按钮@click=" upPage "祝辞(上一页]& lt;/button>   & lt;按钮@click=" downPage "祝辞(下一页]& lt;/button>      & lt; !——回到下一页——比;      & lt;/div>   & lt;/template>      & lt; script>   出口默认{   名称:“应用程序”,   方法:{//跳转页面方法   转转(){   router.push美元。(“/?;   },   upPage () {//后退一步记录,等同于history.back ()   router.go美元。(1);   },   downPage () {//在浏览器记录中前进一步,等同于history.forward ()   router.go美元。(1);   }   }   };   & lt;/script>      

vue跳转页面的几种方法(推荐)