Vue-Router路由Vue-CLI脚手架和模块化开发 之 使用props替代路由对象的方式获取参数
在上一章博文中使用路由对象$route获取参数时，组件和路由对象耦合，在这篇博文中就可以使用props来进行解耦；
1、在组件中使用props选项定义数据，接收参数；
2、在路由中，使用props选项来进行设置，路由中的props有三种模式：
a、布尔模式：props设置为true,可接收params方式的参数传递；
实例：以上一篇的博文为例
当使用了props使用一个数组定义了北京菜数据的属性：
let Bjc={
props:['name','price'],
template : "<h3>北京菜 菜名：{{name}} 价格：{{price}}</h3>"
}
由于没有设置路由，因此北京菜数据获取不到
设置了路由后：
{
path:"bjc/:name/:price",//定义其属性
component:Bjc,
props:true
},
b、函数模式：props为函数，可接收query方式参数的传递；
query的方式的获取的参数，不能使用布尔模式，需要使用函数模式
函数模式格式：
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
]
})
其中：
URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。
请尽可能保持 props 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 Vue 才可以对状态变化做出反应。
以获取湘菜的数据为例
let Xc={
props:['name','price'],
template : "<h3 >湘菜 菜名：{{name}} 价格：{{price}}</h3>"
}
{
path:"xc",
component:Xc,
props : (route) => ({
name : route.query.name,
price : route.query.price
})
},
c、对象模式：props为对象。如果处理静态数据，可使用对象模式；
以粤菜为例：
let Yc={
props:['name','price'],
template : "<h3>粤菜 菜名：{{name}} 价格：{{price}}</h3>"
}
{
path:"yc",
component:Yc,
props:{
name:'蜜汁叉烧量版式',
price:
}
},
最终所有的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 使用props替代路由对象的方式获取参数</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={ props:['name','price'],
template : "<h3>北京菜 菜名：{{name}} 价格：{{price}}</h3>" } let Hnc={
template : "<h3>湖南菜 </h3>" }
let Xc={
props:['name','price'],
template : "<h3 >湘菜 菜名：{{name}} 价格：{{price}}</h3>" } let Yc={
props:['name','price'],
template : "<h3>粤菜 菜名：{{name}} 价格：{{price}}</h3>" } let Scc={
props:['name','price'],
template : "<h3>四川菜 菜名：{{name}} 价格：{{price}}</h3>" } //2 配置路由 路由可能有多个
const myRoutes = [
{
path : "/home",
component : Home
},
{
path : "/foods",
component : Foods, children:[
{
path:"bjc/:name/:price",//定义其属性
component:Bjc,
props:true },
{
path:"hnc",
component:Hnc }, {
path:"xc",
component:Xc,
props : (route) => ({
name : route.query.name,
price : route.query.price
}) },
{
path:"yc",
component:Yc,
props:{ name:'蜜汁叉烧量版式',
price:
} },
{
name:'sccRouter',
path:"scc",
component:Scc,
props:true } ]
},
{
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>
使用props替代路由对象的方式获取参数
Vue-Router路由Vue-CLI脚手架和模块化开发 之 使用props替代路由对象的方式获取参数的更多相关文章
- [Vue 牛刀小试]：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- Vue-Router路由 Vue-CLI脚手架和模块化开发 之 使用路由对象获取参数
使用路由对象$route获取参数: 1.params: 参数获取:使用$route.params获取参数: 参数传递: URL传参:例 <route-linke to : "/food ...
- Vue-Router路由 Vue-CLI脚手架和模块化开发 之 路由常用配置与路由嵌套
vue-router路由常用配置 1.mode:配置路由模式,默认为hash,由于URL很丑,可以修改为history,但是需要服务端的支持: 以上一篇的博文为实例: 初始时url的显示: 使用mod ...
- Vue-Router路由Vue-CLI脚手架和模块化开发 之 vue-router路由
vue-router路由:Vue.js官网推出的路由管理器,方便的构建单页应用: 单页应用(SPA)只有一个web页面的应用,用户与应用交互时,动态更新该页面的内容:简单来说,根据不同的url与数据, ...
- Vue-Router路由Vue-CLI脚手架和模块化开发 之 路由的动态跳转
在上一篇的博文中,实现的跳转是在页面中进行实现的 利用vue-router实例方法,使用js对路由进行动态跳转: 1.router.push:参数为路由对象,跳转到指定路由,跳转后会产生历史记录: & ...
- [工具配置]使用requirejs模块化开发多页面一个入口js的使用方式
描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...
- 使用requirejs模块化开发多页面一个入口js的使用方式
描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...
- Vue.js 2.x笔记：路由Vue Router（6）
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- Vue系列：Vue Router 路由梳理
Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...
随机推荐
- Java基础知识学习笔记（一）
理解面向对象: Java纯粹的面向对象的程序设计语言,主要表现为Java完全支持面向对象的三个基本特征:继承.封装.多态. Java程序的最小单位是类,类代表客观世界中具有某种特征的一类事物,这些类可 ...
- StackView实现叠加在一起的图片循环移动像循环队列一样
MainActivity.java public class MainActivity extends Activity { StackView stackView; int[] imageIds ...
- 个人项目：实现wc.exe（Java）
本项目Github地址:https://github.com/NNewBoy/wc 项目相关要求 基本功能:(已实现) -c 统计文件字符数 -w 统计文件词的数目 -l 统计文件行数 扩展功能:(已 ...
- [svn] TortoisSVN的Blam功能
团队开发中,我们必须要面对多个人对同一个文件进行修改的情况. 多人修改同一文件,往往就会发生很多的问题,或者随着文件中代码的数量不断增加.当我们必须要使用文件中的其他人写的代码,或者代码发生bug之后 ...
- 【Win10】开发中的新特性及原有的变更（二）
声明:本文内容适用于 Visual Studio 2015 RC 及 Windows 10 10069 SDK 环境下,若以后有任何变更,请以新的特性为准. 十一.x:Bind 中使用强制转换 这点是 ...
- codis服务部署前的操作及初始化
1.检查服务器ipv6模块是否打开,如果打开需要禁用ipv6,防止codis-dashbord连接zookeeper失败. 因为不确定codis-dashbord服务连接zookeeper使用ipv4 ...
- 为某金融企业的IT技术部人员提供基于TFS的软件研发流程介绍
受莫金融企业IT信息技术部的邀请,为该金融企业的某省分公司.地市分公司的IT技术人员提供了一场基于TFS的软件研发流程的技术培训,希望可以借此提高该企业的软件研发.运维水平,同时推动企业软件研发信息化 ...
- Django：model.save()的时候在干什么
转:https://www.cnblogs.com/zywscq/p/5397439.html Model.save(force_insert=False, force_update=False, u ...
- C# 成员变量和属性的区别
之前一直在C#中使用这两者, 却一直不知道成员变量和属性还是不一样的两种概念. 不过说不一样, 也不是完全对. 简单举个例子: public class myclass { public string ...
- CSS2.1SPEC：视觉格式化模型之width属性详解(下)
本文承接CSS2.1SPEC:视觉格式化模型之width属性详解(上),继续分析CSS视觉格式化模型中width以及相关值的计算问题: 注:与上节不同,本节的demo中由于出现了float,absol ...