Vue-Router路由 Vue-CLI脚手架和模块化开发之使用路由对象获取参数

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

使用路由对象$route获取参数：

1、params：

参数获取：使用$route.params获取参数；

参数传递： URL传参：例 <route-linke to : "/foods/bjc/北京烤鸭/68"> 注：在对应路由path上使用 /:+属性名称接收参数

实例：

需要在子组件的路由中定义所需的属性名;

代码：

//定义foods中的子组件 let Bjc={
template : "<h3>北京菜菜名：{{$route.params.name}} 价格：{{$route.params.price}}</h3>" }

//2 配置路由路由可能有多个
const myRoutes = [
{
path : "/home",
component : Home
},
{
path : "/foods",
component : Foods, children:[
{
path:"bjc/:name/:price",//定义其属性
component:Bjc },

对象传参：例 <route-linke :to : "xxObj"> 注：对象格式{String name, Objce param} name是路由名称，param是传递参数的对象

对象需要通过v-bind进行绑定

<router-link :to="sccParam" tag="li"> 四川菜</router-link>

使用对象：

let Foods = {
template : "#foods",
data(){ return{
sccParam:{ name:'sccRouter', params:{ name:"麻婆豆腐",
price:
}
}
}
}
}

let Scc={
template : "<h3>四川菜菜名：{{$route.params.name}} 价格：{{$route.params.price}}</h3>" }

效果：

注意：对象的名称必须和路由的名称保持一致，在路由中起的名称可以称作为命名路由

2、query：

参数获取：使用$route.query获取参数；

参数传递： URL传参：例 <route-linke to : "/foods/bjc?name=北京烤鸭&price=68">

代码：

<router-link to="/foods/xc?name=剁椒鱼头&price=128" tag="li"> 湘菜</router-link>

let Xc={
template : "<h3 >湘菜菜名：{{$route.query.name}} 价格：{{$route.query.price}}</h3>" }

对象传参：例 <route-linke :to : "xxObj"> 注：对象格式{String path, Objce query} path是路由url，query是传递参数的对象

<router-link :to="ycParam" tag="li"> 粤菜</router-link>

let Foods = {
template : "#foods",
data(){ return{
sccParam:{ name:'sccRouter', params:{ name:"麻婆豆腐",
price:
}
}, ycParam:{
path:'/foods/yc',
query:{
name:"蜜汁叉烧",
price: } }
}
}
}

let Yc={
template : "<h3>粤菜菜名：{{$route.query.name}} 价格：{{$route.query.price}}</h3>" }

以上实例的所有代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用路由对象获取参数</title>
</head>
<body>
<div id="one">
<router-link to="/home">首页</router-link>
<router-link to="/foods">美食</router-link> <div>

<router-view></router-view>
</div>
</div>
</body>
<template id="foods"> <div> <h2>美食广场</h2>
<ul>
<router-link to="/foods/bjc/北京烤鸭/68" tag="li"> 北京菜</router-link>
<router-link to="/foods/hnc" tag="li"> 湖南菜</router-link>
<router-link to="/foods/xc?name=剁椒鱼头&price=128" tag="li"> 湘菜</router-link>
<router-link :to="ycParam" tag="li"> 粤菜</router-link>
<router-link :to="sccParam" tag="li"> 四川菜</router-link>
</ul> <router-view></router-view>
</div>
</template> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript" src="../js/vue-router.js" ></script>
<script> //1 定义组件
let Home = {
template : "<h2>首页</h2>"
}
let Foods = {
template : "#foods",
data(){ return{
sccParam:{ name:'sccRouter', params:{ name:"麻婆豆腐",
price:
}
}, ycParam:{
path:'/foods/yc',
query:{
name:"蜜汁叉烧",
price: } }
}
}
} //定义foods中的子组件 let Bjc={
template : "<h3>北京菜菜名：{{$route.params.name}} 价格：{{$route.params.price}}</h3>" } let Hnc={
template : "<h3>湖南菜 </h3>" }
let Xc={
template : "<h3 >湘菜菜名：{{$route.query.name}} 价格：{{$route.query.price}}</h3>" } let Yc={
template : "<h3>粤菜菜名：{{$route.query.name}} 价格：{{$route.query.price}}</h3>" } let Scc={
template : "<h3>四川菜菜名：{{$route.params.name}} 价格：{{$route.params.price}}</h3>" } //2 配置路由路由可能有多个
const myRoutes = [
{
path : "/home",
component : Home
},
{
path : "/foods",
component : Foods, children:[
{
path:"bjc/:name/:price",//定义其属性
component:Bjc },
{
path:"hnc",
component:Hnc }, {
path:"xc",
component:Xc },
{
path:"yc",
component:Yc },
{
name:'sccRouter',
path:"scc",
component:Scc } ]
},
{
path:"*",
redirect:"/home"
}
] // 3 创建路由对象
const myRouter = new VueRouter({
//routes : routes
routes : myRoutes,
//mode:'history'
linkActiveClass : "active" }); new Vue({
//router : router
router : myRouter //4 注入路由简写
}).$mount("#one");
</script>
<style> .active{
color: white; background-color: black;
}
</style>
</html>