vue.js路由跳转,vue-router路由跳转

　　本文主要为大家介绍vue路由跳转的方式，有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

第一种方式：router-link （声明式路由）

　　1.没有参数

　　router-link :to={name:home}

　　router-link:to= { path:/home } //name，path可以，name推荐。

　　//注意：如果router-link中的链路以/开头，则以根路由开头；如果开始时没有“/”，则从当前路线开始。

　　2.带参数

　　router-link :to={name:home ，params: {id:1}}

　　//params传输参数(类似于post)

　　//路由配置路径：“/home/:id”或路径：“/home:id”

　　//如果没有配置path，可以第一次请求，刷新页面id会消失。

　　//配置路径，保留刷新页面id

　　//html take $ route.params.id。

　　//脚本取此。$route.params.id

　　router-link :to={name:home ，查询：{id:1}}

第二种方式：router.push(编程式路由)

　　//字符串

　　router.push(home )

　　//对象

　　router.push({ path: home })

　　//命名的路由

　　router.push({ name: user ，params: { userId: 123 }})

　　//带查询参数，成为/register？计划=私人

　　router.push({ path: register ，query: { plan: private }})

　　注意：如果提供了path，params将被忽略，这与上面示例中的查询不同。相反，如以下示例所示，您需要提供路径名或带参数的手写完整路径：

　　const userId=123

　　router.push({ name: user ，params: { userId }}) //- /user/123

　　router . push({ path:`/user/$ { userId } `})//-/user/123

　　//此处的参数不生效

　　router.push({ path: /user ，params: { userId }}) //- /user

第三种方式：this.$router.push() (函数里面调用)

　　1.没有参数

　　这个。$router.push(/home )

　　这个。$router.push({name:home})

　　这个。$router.push({path:/home})

　　2.查询传递参数

　　这个。$router.push({name:home ，query: {id:1}})

　　这个。$router.push({path:/home ，查询：{id:1}})

　　//html采用引用$ route.query.id。

　　//脚本取此。$route.query.id

　　3.参数介绍

　　这个。$ router.push ({name: home ，params:{ ID: 1 } })//只能使用name

　　//路由配置路径：“/home/:id”或路径：“/home:id”，

　　//如果没有配置path，可以第一次请求，刷新页面id会消失。

　　//配置路径，保留刷新页面id

　　//html take $ route.params.id。

　　//脚本取此。$route.params.id

　　4.查询和参数的区别

　　类似于查询get，跳转后的页面url后会拼接参数，类似于？Id=1，不重要的可以这样传，密码之类的还是可以用params刷新。页面id还在。

　　Params类似于post。跳转后，页面url后不会拼接参数，但是刷新后的页面id会消失。

　　* *注意：要获得路由以上的参数，使用$route，不带r**

第四种方式：this.$router.replace() (用法同上，push)

第五种方式：this.$router.go(n)

　　这个。$router.go(n)

　　或者前后跳转n页，其中n可以是正整数，也可以是负整数。

　　Ps:区别

　　这个。$router.push

　　跳转到指定的url路径，并将记录添加到历史堆栈中。单击“上一步”返回上一页。

　　这个。$router.replace

　　跳转到指定的url路径，但是历史堆栈中不会有记录。点击返回会跳转到上一页(即直接替换当前页)

　　这个。$router.go(n)

　　或者前后跳转n页，其中n可以是正整数，也可以是负整数。

　　Params是路线的一部分，它必须在那里。查询是在url之后拼接的参数。没有也没关系。

　　一旦在路线中设置了params，params就是路线的一部分。如果params被传递到这个路由，但是这个参数在跳转期间没有被传递，跳转将失败或者页面将没有内容。

　　Params和query也可以在不设置的情况下传输，但是当params未设置时，刷新页面或返回参数将会丢失。

　　两者都可以传递参数。有什么区别？

　　query参数是用path配置的，而params参数是用name配置的。在参数中配置路径无效。

　　查询路由配置中不需要设置参数，但必须设置参数。

　　查询传递的参数将显示在地址栏中。

　　params传递参数的刷新将无效，但查询将保存传递的值，并且刷新将保持不变。

参考：

　　https://www.jb51.net/article/183611.htm

　　Vue.js官网

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。