详细说明如何使用路由器链接对象传递参数

问题：(判断和参考)

点击导航栏，js如何判断自己点击了哪个具体的栏？它们是如何传递的？如何使用参数携带查询参数？

效果图说明：

A.单击并选择[屈原“查看详情”]之前

B.点击并选择[屈原“查看详情”]

要点总结：

在vue-router中，两个对象被装载到这个实例中；$route(只读、信息对象)；$路由器(带功能的功能)

查询字符串：

1.去哪里？

router-link : to=' { name : ' detail '，query : { id 33601 } } ' XXX/router-link 2。导航(查询字符串路径不需要更改)

{name:' detail '，path:'/detail '，组件}3。你为什么去那里？获取路由参数(注意查询或参数和对应的id名称？需要注意设置相关文件的id规则的是后者)

这个。$route.query.id

路径模式：

1.去哪里？

router-link : to=' { name : ' detail '，params 3360 { name 33601 } } ' XXX/router-link 2。导航(查询字符串路径不需要更改)

{name:' detail '，path:'/detail/: name '，组件}3。你为什么去那里？获取路由参数(注意查询或参数和对应的名称？需要注意设置相关文件的id规则的是后者)

这个。$route.params.id

相关文件代码：

1.main.js文件

从“Vue”导入Vue；从“vue-router”导入VueRouter//导入主题(页面初始化显示)从“”导入应用程序。/components/app . vue '；//逐个链接对象-类别导入详细信息来自“”。/components/detail . vue '；从“”导入列表。/components/list . vue '；//安装插件Vue . use(VueRouter)；//挂载属性//创建路由对象并配置路由规则。let router=new vue router({//routes routes 3360[//link objects { name : ' detail '，path:'/detail '，component3360 detail}，//此处的路径规则不受list.vue中查询的影响(与参数规则相匹配){name:' list '，path:'/list '，component : list }]})；/* new Vue starts */new Vue({ El : ' # app '，render:c=c (app)，//让Vue知道我们的路由规则router:router，///可以缩写为router})2。app.vue文件

template div class=' header ' header-导航栏p router-link 3360 to=' { name : ' detail ' } ' detail list 1/router-link router-link : to=' { name 3360 ' list ' } ' hero list 1/router-link/p/div-离开坑，这非常重要-router-view class=' main '/router-view div class=' footer ' bottom-版权信息/div/div/template脚本导出默认{ data(){ return } }，methods:标题，main，页脚{text-align:居中；padding: 10px} .表头{ height:70px背景：黄绿色；} .main { height:300px背景skyblue} .页脚{ height: 100px背景hotpink}/style3。list.vue文件

模板div我是列表列表！- :key是活页夹-！- query是带有查询参数的查询字符串，相当于查询规则；与关于路由配置的main.js的path属性-ul Li v-for=' (hero，index)在hero ' 3360 key=' index ' { hero . name } } router-link : to=' { name 3360 ' detail '中进行比较。Query:{id:index}} '查看详细信息/路由器-链接/Li/ul/div/模板脚本导出默认{ data(){ return { heros 3360[{ name 3360 '李白' }，{ name: '杜甫' }，{name: '屈原' }，{ name: '白居易' }，{ name: '李清照' }，{ name: '欧阳修' } } } }}/style4。detail.vue文件：(打印结果可在控制台上查看)

template div I am details/div/template script export default { data(){ return } }，//DOM尚未生成create(){//get routing parameters//两个对象的属性挂载在//vue-router/$ route(信息数据)/$router(函数函数函数)/* console.log(这.*/console.log(这。$ route . query)；}，//数据已经加载到页面上，DOM已经生成mounted(){} }/scriptstyle/style。这就是本文的内容。

以上是如何使用路由器-链路对象来传输参数的详细说明和集成。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！