Vue_day06

Vue DAY06

脚手架路由运行流程

基于路由系统完成页面跳转功能

基于组件方式，实现路由跳转：

<router-link to="目标地址">链接文本</router-link>
<router-link to="/about">点击去往about</router-link>

编程式跳转：

this.$router.push('目标地址')

this.$router是什么？

当前项目中的路由管理器(VueRouter对象)，管理了所有的路由对象。除此之外，还提供了很多方法，进行路由操作：

this.$router.push('/about')   跳转到 /about
this.$router.go(-1)           回到上一页

this.$router.push()跳转的过程中，有可能出现如下错误：

上述错误的原因：当前页面已经是/nameslot页面了，结果在跳转的过程中还要跳转到该路由地址：/nameslot，导致路由重复跳转的问题。在此可以添加一个if判断：如果当前路由地址已经是/nameslot，那么就不再向该地址跳转了。

if(this.$route.path=='/nameslot'){
    return;   // 当前地址已经是 /nameslot了，就不必跳转了
}

路由跳转过程中的参数传递

**业务场景：**在电影列表页面中点击某一项的点击名称，跳转到电影详情页，查看选中电影的详细信息。这个过程就需要在跳转的同时传递电影ID作为参数，这样，详情页才可以获取到选中项的ID，从而发送请求，查询详细信息。

1. 准备一个电影列表页：List.vue 一个电影详情页：Detail.vue
2. 配置路由：
   1. 当访问地址：http://localhost:8080/list时，看到列表页。
   2. 当访问地址：http://localhost:8080/detail时，看到详情页。
3. 注意：需要在App.vue中添加占位符：<router-view />

路由跳转过程中的参数传递方式1

通过在请求资源路径后用?拼接查询字符串的方式，传递参数：

<router-link to="/detail?id=7&name=zs">xx</router-link>
this.$router.push('/detail?id=7&name=zs')

在目标页面中，接收参数：id与name：

export default {
    /** Vue官方提供的生命周期方法
        该方法将会在组件挂载到页面展示时被vue自动调用并执行 */
    mounted(){
        let id = this.$route.query.id
        let name = this.$route.query.name
    }
}

路由跳转过程中的参数传递方式2

<router-link to="/detail/7">xx</router-link>
this.$router.push('/detail/7')

目标页如何接收该参数？

1. 配置路由：

   {
       path: '/detail/:id',
       props: true,   // 将参数直接赋值给props属性
       component: ()=> import 'Detail.vue'
   }
   

   该路由的配置，将会匹配：

   /detail/7        =>   id:7
   /detail/123      =>   id:123 
   /detail/abc      =>   id:abc
   

2. vue将会自动封装路径参数，放入this.$route.params属性中。如下即可获取该参数：

   props:['id'],
   data(){},
   methods:{},
   mounted(){
       let id = this.$route.params.id
   }
   

Vue组件的生命周期

整个Vue项目由一个一个的组件组成，每个组件各司其职，当需要看到某一个组件时，vue将会创建该组件，将组件的内容挂载到页面上显示，当需要跳转时，vue将会把该组件从页面中卸载，销毁。这个完整的过程都是由vue所管理。

如果有如下需求，那么该如何去做？

当组件挂载完毕后，发送一个请求，访问列表数据。
当页面准备销毁时，将该组件中申请的系统资源手动释放。（例如：定时器）
当页面结构开始创建时，计算并准备一些数据用于显示。
当....
当....
当....

vue组件的生命周期就是为了解决遇到这些业务需求时，提供了上述需求编写代码的位置。vue提供了很多的组件生命周期（组件从生到死的过程）相关的方法，这些方法会在组件使用过程中的相应时间节点自动调用，我们有一些业务需求，可以选择相应的生命周期方法中来进行编写。

export default {
    // create表示组件被创建的时间节点
    // （创建组件对象，初始化data/method/computed..）
    beforeCreate(){ 
        console.log('beforeCreate 组件创建之前执行') 
    },   
    created(){ 
        console.log('created 组件创建完毕后执行') 
    },
    // mount表示组件被挂载到了dom树中展示
    beforeMount(){ 
        console.log('beforeMount 组件被挂载之前执行') 
    },
    mounted(){ 
        console.log('mounted 组件挂载完毕后，已经展示时执行') 
    },
    // update表示组件的内容有更新
    beforeUpdate(){ 
        console.log('beforeUpdate 数据被修改，但页面未更新时') 
    },
    updated(){ 
        console.log('updated 数据被修改 页面已经完成更新') 
    },
    // destroy 表示组件被销毁
    beforeDestroy(){ 
        console.log('beforeDestroy 组件即将被销毁时') 
    },
    destroyed(){ 
        console.log('destroyed 组件已经销毁时') 
    }
}

Vue组件库

1. 饿了么团队研发了一套基于PC端的vue组件库（包含了很多的自定义组件）。- ElementUI。
2. 有赞团队研发了一套基于移动端的vue组件库。Vant。

在VueCLI项目中使用ElementUI

1. 准备好一个项目。

2. 在项目的根目录下，安装ElementUI。

   npm  i  element-ui  -S
   

3. 在main.js中全量引入ElementUI：

   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   // use()方法将所有组件都引入到当前项目的Vue对象中，所以可以随时使用组件库
   Vue.use(ElementUI);
   

4. 通过阅读文档，使用ElementUI组件即可。

   新建一个页面：src/views/Button.vue。

   配置路由：访问地址http://localhost:8080/button，看到该页面中的Button。

ElementUI适合写什么样的项目？

适合写：基于PC端的后台管理网站。

ElementUI的常用组件

NavMenu导航组件

基本结构：

<!-- mode="horizontal" 水平导航 -->
<el-menu mode="horizontal" :default-active="active">
	<el-menu-item index="1">指南</el-menu-item>
	<el-menu-item index="2">组件</el-menu-item>
	<el-menu-item index="3">主题</el-menu-item>
	<el-menu-item index="4">资源</el-menu-item>
</el-menu>
<script>
	.....
    data(){
        return {
            active: '1'
        }
    }
    .....
</script>

案例：

1. 准备一个新的页面组件：src/views/Nav.vue
2. 配置路由。访问： /nav， 看到该组件。

如何设置子菜单

<!-- mode="horizontal" 水平导航 -->
<el-menu mode="horizontal" :default-active="active">
	<el-menu-item index="1">指南</el-menu-item>
	<el-menu-item index="2">组件</el-menu-item>
	<el-submenu index="3">
        主题
		<el-menu-item index="3-1">xxxx111</el-menu-item>
		<el-menu-item index="3-2">xxxx222</el-menu-item>
    </el-submenu>
	<el-menu-item index="4">资源</el-menu-item>
</el-menu>

如何设置垂直导航

<el-menu :default-active="active">
	<el-menu-item index="1">指南</el-menu-item>
	<el-menu-item index="2">组件</el-menu-item>
	<el-menu-item index="3">主题</el-menu-item>
	<el-menu-item index="4">资源</el-menu-item>
</el-menu>

使用组件库时，如何修改组件库中组件的默认样式？

1. 先去组件的文档中寻找，官方是否提供了修改样式相关的属性配置，如果有，则首选使用此方式修改组件样式。
2. 直接为组件添加class属性，通过style设置样式。
3. 为组件添加style属性，设置内联样式。
4. 右键检查该组件生成的元素，找到应该元素样式的类名，复制出来，在style标签中覆盖即可。如果出现优先级不够的问题，则使用!important提高优先级即可。