vue 尚品汇实战项目（一）

90 阅读 0 评论 60 点赞

我是靠谱客的博主难过红酒，最近开发中收集的这篇文章主要介绍vue 尚品汇实战项目（一），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、项目开发流程：

1.书写静态页面

2.拆分组件

3.获取服务器的数据动态展示

4.完成相应的动态业务逻辑

2.路由组件与非路由组件的区别？

1：路由组件一般都放在pages/views文件夹，非路由组件一般都放在componets

2：路由组件一般都需要在router文件夹中进行注册（使用的就是组件的名字），非路由组件使用的时候一般都是以标签的形式

在main.js中注册路由信息，书写router的时候，组件的身上都拥有$route $router属性

$route：一般获取路径信息【路径、query、params等等】

$router：一般进行编程时导航路由跳转【push|replace】两种区别能不能记住历史记录

3、路由传递参数的三种写法：字符串形式、模板字符串、对象

this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase());

this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`);

this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}});

3、路由的params参数和query参数的传递

params参数：路由需要占位，在路径中占位:keyword

{
	path:'/search/:keyword',
}

query参数：路由不需要占位

<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
           title:'你好'
		}
	}"
>跳转</router-link>

1:路由传递参数（对象写法）path是否可以结合params参数一起使用?

路由跳转传参的时候，对象的写法可以是name,path的形式，但是path不能结合parmas这样写，会导致跳转的时候路由的路径只带params参数，原来预想跳转的组件路径失效。

2:如何指定params参数可传可不传?

配置路由时，路径进行占位了，但是路由跳转的时候就不传递，路径出现问题。

解决办法：

占位符后面加个问号

{
	path:'/search/:keyword?',
}

3:params参数可以传递也可以不传递，但是如果传递是空串，如何解决？

解决方法：使用undifined

this.$router.push({name:"search",params:{keyword:''||undefined},query:{k:this.keyword.toUpperCase()}});

4: 路由组件能不能传递props数据?

能传递，且有三种写法

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}