vue router传递参数,vue-router路由传参

　　本文主要介绍vue中的路由跳转、参数传递和参数获取方法，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。

vue中的路由讲三点

　　第一点：

　　指令级的Route router-link和程序级的route router . push()；第二点：

　　通过query和params传递参数与路径和名称之间的关系。第三点：

　　$router和$route的区别声明：因为路由和参数获取结合紧密，所以混合起来解释，最后会附上一个例子。

html中通过router-link指令完成路由跳转

第一种情况就是以path形式

　　幽州城楼上的to=/foo

第二种情况就是以路由对象Object的形式

　　router-link :to={ name:武汉，查询：{city:武汉 }}router1/router-link

　　请注意，这里的名称是指一个命名的路由，路由列表中的配置如下

　　{名称：武汉，路径：/武汉，组件：武汉}

　　武汉是该路线将到达的模板或页面，其定义如下

　　Const武汉={template: div武昌，汉口，汉阳-{ undefined { $ route . query . city } }/div }

　　注意，在router-link中，参数是通过查询的表单区域传递的，所以所有参数只能在目的页面中以查询的形式获取。

　　也可以用params的形式传递参数，而不是query方法。

　　router-link :to={ name:武汉，params: {city:武汉 }}router3/router-linkbr

　　那么params传递的参数必须在路由表中的路径中取，否则在目的页面中无法获取参数。

　　{名称：武汉，路径：/武汉/:城市，组件：武汉}

　　在目标页面中以params的形式获取相应的参数值。

　　Const武汉={template: div武昌，汉口，汉阳-{ undefined { $ route . params . city } }/div }

　　注意：路径和参数不能同时出现在router-link的路由对象中，此时参数将失效。无法在目标页面中获取参数。

　　建议将名称与参数匹配，将路径与查询匹配。最好以查询的形式传递参数和获取参数，而不是params，

　　因为params是用来传递参数的，所以当你进入目的页面的时候确实可以正确获取参数，但是当你刷新页面的时候，参数就会丢失。

　　因此，建议以查询的形式传递参数。

最后谈谈$router和$route地区别

结论：没有任何关系

　　$router的类型是VueRouter，整个项目中只有一个VueRouter实例。使用$router是为了实现路由跳转，$router.push()。

　　跳转成功后，你到达某个页面。要获得从上一页传递的参数，此时使用$route。

　　或者$route.query.city，或者$route.params.city也就是说，$router和$ route在路由的不同阶段发挥作用。

　　超文本标记语言

　　headmeta charset=UTF-8/head

　　身体

　　script src= https://UNP kg . com/vue/dist/vue . js /script

　　script src= https://UNP kg . com/vue-router/dist/vue-router . js /script

　　div id=应用程序

　　h1你好App！/h1

　　！-使用路由器链接组件进行导航。-

　　！-通过传递“to”属性来指定链接。-

　　！-默认情况下，路由器链接将呈现为“a”标记-

　　路由器链接到幽州城楼上的=/foo

　　路由器-链接到=/bar 江雪/路由器-链接

　　router-link to=/city/China Xi an/router-link

　　路由器-链接到=/city/Greece 雅典/路由器-链接

　　Router-link to=/book/史铁生静修笔记/router-link

　　英国铁路公司

　　router-link :to={ name:武汉，查询：{city:武汉 }}router1/router-linkbr

　　router-link:to= { path:/武汉，查询：{city:武汉 }}router2/router-linkbr

　　router-link :to={ name:武汉，params: {city:武汉 }}router3/router-linkbr

　　！-路线出口-

　　！-与路线匹配的组件将在此呈现-

　　路由器视图style= margin-top:100p x /路由器视图

　　/div

　　脚本

　　//1.定义路线组件。

　　//这些可以从其他文件导入

　　const Foo={ template: div前不见古人，后不见来者。念天地之悠悠，独怆然而涕下！/div }；

　　const Bar={ template: div千山鸟飞绝，万径人踪灭。孤舟蓑笠翁，独钓寒江雪。/div }；

　　const Capital={ template: div时间已经摧毁了多少个西安城，雅典城{ { $ route。参数。country } }/div }

　　const Book={template: div务虚笔记-通过{ { $ route。参数。author } }/div }

　　常数武汉={template: div武昌，汉口，汉阳- {{$route.params.city}}/div}

　　//2.定义一些路线

　　//每个路由都应该映射到一个组件。"组件"可以

　　//要么是通过创建的实际组件构造函数

　　//Vue.extend()，或者只是一个组件选项对象。

　　//我们稍后将讨论嵌套路由。

　　常量路由=[

　　{ path:"/Foo "，组件：Foo }，

　　{路径："/Bar "，组件：Bar }，

　　{ path:"/city/:country "，component: Capital }，

　　{路径：/book/:author ，组件：Book }，

　　{路径： /武汉/:城市，名称：武汉，组件：武汉}

　　]

　　//3.创建路由器实例并传递"路线"选项

　　//您可以在这里传入附加选项，但是让我们

　　//现在保持简单。

　　const router=new VueRouter({

　　路线：路线

　　})

　　函数导航(){

　　router.push({

　　路径：/武汉，

　　参数：{

　　城市："武汉"

　　}

　　});

　　}

　　//4.创建并装载根实例。

　　//确保使用路由器选项插入路由器，以使

　　//全应用路由器感知。

　　const app=new Vue({路由器：路由器}).$ mount("# app ")

　　//现在应用已经启动了！

　　/脚本

　　/body

　　/html

　　以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

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