Vue —— 项目实战总结（一）

---

1. 创建项目

1. win + r，输入 cmd，打开终端
2. 输入代码：cd desktop，定位到桌面
3. vue create xxx （xxx 为项目名）

2. 目录内容

1. node_modules：放置项目依赖的地方
2. public：一般放置一些公用的静态资源，打包上线的时候，public 文件夹里面资源原封不动打包到 dist 文件夹里面。
3. src：程序员源代码文件夹
   （1）assets 文件夹：经常放置一些静态资源（图片）
   （2）components 文件夹:一般放置非路由组件（或者项目共用的组件）
   （3）App.vue 唯一的根组件
   （4）main.js 入口文件（程序最先执行的文件）
   （5）babel.config.js:babel 配置文件
   （6）package.json：看到项目描述、项目依赖、项目运行指令
   （7）README.md：项目说明文档
   （8）pages 文件夹【自己创建】：放置路由组件
   （9）router 文件夹【自己创建】：配置路由

3. 路由的配置

1. 终端输入：npm i vue-router@3 【对应的是vue2.x版本】

2. 在main.js 引入并注册路由

	import router from '@/router'
	
	new Vue({
	  render: (h) => h(App),
	  router,
	}).$mount("#app");

3. 注册路由信息：当这里书写router的时候，组件身上都拥有 $route，$router属性
   （1）$route：一般获取路由信息【路径、query、params】
   （2）$router：一般进行编程式导航进行路由跳转【push | replace】

4. 在 src 目录下新建 router 文件，在该文件下创建 index.js 文件

	// 配置路由的地方
	import Vue from "vue";
	import VueRouter from "vue-router";
	
	// 使用路由插件
	Vue.use(VueRouter);
	// 引入路由组件
	import Home from "@/pages/Home";
	
	// 配置路由
	export default new VueRouter({
	  // 配置路由
	  routes: [
	    {
	      path: "/home",
	      component: Home,
	      meta: { show: true },
	    }
	    // 重定向，在项目跑起来的时候，访问/，立马让它指向首页
	    {
	      path: "*",
	      redirect: "/home",
	    },
	  ],
	});

4. 路由的跳转

1. 声明式导航：router-link：必须要有 to 属性，指向跳转到的地址

	<router-link to='/xxx'></router-link>

2. 编程式导航：$router.push | replace，可以书写一些自己的业务

	<button @click="xxx"></button>
	
	methods:{
		xxx() {
			this.$router.push(......)
		}
	}

5. 路由的元信息

在 ./router/index.js 中使用 meta: {}， 配置元信息

	path: "/home",
    component: Home,
	meta: {show: true}
	.......

在 App 组件中用于隐藏和显示

	<Footer v-show="$route.meta.show"/>

6. 路由传参

params 参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位。

	path: "/search/:keyword"

query 参数：不属于路径当中的部分，类似于 ajax 中的 queryString，不需要占位。

	path: "/search"

1. 字符串形式（路由传递参数）

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

2. 模板字符串（路由传递参数）

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

3. 对象的形式：先给路由配置 name 属性，再传参

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

接收

    <div>
      <h1>params参数————{{ $route.params.keyword }}</h1>
      <h1>query参数————{{ $route.query.k }}</h1>
    </div>

7. 路由传参的面试题

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

答：路由跳转传参的时候，对象的写法可以是 name、 path 形式，但是需要注意的是，path 这种写法不能与 params 参数一起使用。

2. 如何指定 params 参数可传和不可传？

答：如果要求传递 params 参数，但是并没有传递，则地址栏的 URL 会有问题。我们可以在配置路由的时候，在占位符的后面加上一个问号 （path: "/search/:keyword?"）【params 可以传递或者不传递】，此时地址栏的 URL 不会发生错误。

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

答：使用 undefined 解决：params 参数可以传参、不传参（空字符串）

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

4. 路由能不能传递 props 数据？

答案：可以。

1. 布尔值写法：只能传递 params 参数：props：true
2. 对象写法：额外的给路由传递一些参数：props: {a: 1, b: 2}
3. 函数写法：可以传递 params 参数，也可以传递 query 参数，通过 props 传递给路由组件。

	props: ($route) => ({keyword: $route.params.keyword, k: $route.query.k})