疑问:(判断和传参)
点击导航栏目,js如何判断自己点击的是哪个具体栏目?
它们是如何传参的?
如何使用params,携带查询参数?
效果图解说:
。点击选择【屈原“查看详情”】之前
B。点击选择【屈原“查看详情”】之后
在vue-router中,有两大对象被挂载到了实例;
$路线(只读,具备信息的对象),
美元的路由器(具备功能的函数)
1。去哪里?
& lt; router-link:="{名称:“细节”,查询:{id: 1}}”在xxx & lt;/router-link>
2。导航(查询字符串路径不用改)
{名称:“细节”,路径:/细节,组件}
3。去了干嘛?获取路由参数(要注意是查询,还是参数和对应的id名& # 63;是后者需要注意设置相关文件的id规则)
<代码> +。美元route.query.id
1。去哪里?
& lt; router-link:="{名称:“细节”,参数:{名称:1}}”在xxx & lt;/router-link>
2。导航(查询字符串路径不用改)
{名称:“细节”,路径:/细节/:名称,组件}
3。去了干嘛?获取路由参数(要注意是查询,还是参数和对应的名字名& # 63;是后者需要注意设置相关文件的id规则)
<代码> +。美元route.params.id
<强> 1。main.js文件
从“进口Vue Vue ';
从“进口VueRouter vue-router ';//引入主体(页面初始化显示)
导入应用程序从“。/组件/app.vue”;//一个个链接对象,分类
从“进口细节。/组件/detail.vue ';
从’。/组件/导入列表list.vue”;//安装插件
Vue.use (VueRouter);//挂载属性//创建路由对象并配置路由规则
让路由器=new VueRouter ({//路线
路线:[//一个个链接对象
{名称:“细节”,路径:/细节,组件:细节},//此处的路径规则不受list.vue中的查询(匹配参数规则的)影响
{名称:“名单”,路径:/列表,组件:列表}
]
});/*新Vue启动*/新Vue ({
埃尔:“#应用”,
呈现:c=比;c(应用)//让vue知道我们的路由规则
路由器:路由器,//可以简写为路由器
}）
之前
<强> 2。app.vue文件
& lt; template>
& lt; div>
& lt; div类="头"比;
头部——导航栏目
& lt; p>
& lt; router-link:="{名称:“细节”}”在细节列表1 & lt;/router-link>
& lt; router-link:="{名称:' list '}”在英雄列表1 & lt;/router-link>
& lt;/p>
& lt;/div>
& lt; !——留坑,非常重要,比;
& lt; router-view类="主"祝辞& lt;/router-view>
& lt; div类=耙辰拧痹诘撞俊嫒ㄐ畔? lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
}
},
方法:{
}
}
& lt;/script>
& lt; scoped>风格;
.header .main,。页脚{text-align:中心;填充:10 px;}
.header{高度:70 px;背景:黄绿色;}
.main{高度:300 px;背景:天蓝色;}
.footer{高度:100 px;背景:hotpink;}
& lt;/style>
之前
<强> 3。list.vue文件
& lt; template>
& lt; div>
我是列清单表
& lt; !——:关键是绑定器——比;
& lt; !——查询是查询字符串,加查询参数,相当于查询规则;对比参考main.js关于路由配置路径属性——比;
& lt; ul>
& lt;李v=坝⑿?英雄,指数)”:关键=爸甘北?
{{hero.name}}
& lt; router-link:="{名称:“细节”,查询:{id:指数}}”在查看详情& lt;/router-link>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
英雄:[{
名称:“李白的
},{
名称:“杜甫”
},{
名称:“屈”原
},{
名称:“白居易的
},{
名称:“李清照的
},{
名称:“欧阳修的
})
}
}
}
& lt;/script>
& lt; scoped>风格;
ul,李{list-style:没有;}
& lt;/style>
