2020-09-11、vue的路由与路有守卫简单认识

内容：作用域插槽、组件props验证、路由、路由守卫

日期：2020-09-11

一、作用域插槽

当我们希望数据由子组件提供，页面结构由父组件提供，这种情况下我们可以作用域插槽。

v-slot

子组件中有数据，但是需要在父组件中控制页面结构

子组件：

<template>
    <div>
        <h1>子组件</h1>
        <ul>
            <slot name="list" v-for="item of movies" :item="item"></slot>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return{
            movies:[
                '怒火追凶','上海王2','谎言大师'
            ]
        }
    }
}
</script>
<style></style>

父组件：

<template>
    <div>
        <h1>父组件</h1>
        <hr>
        <v-child>
            <template v-slot:list="props">
                <li>{{ props.item }}</li>
            </template>
        </v-child>
    </div>
</template>
<script>
import vChild from './Child'
export default {
    components:{
        vChild
    }
}
</script>
<style></style>

二、props验证

如果需要在子组件接收父组件数据时，对数据进行一些验证，需要用到props验证。在子组件接收父组件传递的数据，要用对象的方式，在对象中可以设置相应的验证规则。

1.数据类型验证

写法一：

props:{
	'参数名':数据类型名称
}

写法二：

props:{
	'参数名':{
		type:数据类型名称
	}
}

如果支持多个数据类型，使用数组

props:{
	'参数名':{
		type:[数据类型名称1,数据类型名称2]
	}
}

2.必填

props:{
	'参数名':{
		type:数据类型名称,
		required:true//设置当前参数为必传值
	}
}

3.默认值

props:{
	'参数名':{
		type:数据类型名称,
		//default:"默认展示的内容"
		default:function(){
			return {
				msg:'默认展示的内容'
			}
		}
	}
}

4.自定义验证规则

props:{
	'参数名':{
		validator:function(形参){
			对形参的验证规则
			return 验证结果或者布尔值
		}
	}
}

示例代码：

父组件：

<template>
    <div>
        <h1>父组件</h1>
        <hr>
        <v-child :msg="msg" :num="num" :str="str"></v-child>
    </div>
</template>
<script>
import vChild from './Child'
export default {
    components:{
        vChild
    },
    data(){
        return{
            msg:"hello",
            num:500,
            str:"0824"
        }
    },
}
</script>
<style></style>

子组件：

<template>
    <div>
        <h1>子组件</h1>
        <p>父组件传递的数据是：{{ msg }}</p>
        <p>父组件传递的数据是：{{ num }}</p>
        <p>{{str}}</p>
    </div>
</template>

<script>
export default {
    props:{
        // msg:String//仅设置数据类型（数据类型名称首字母要大写）
        // msg:{
        //     type:String
        // }
        msg:{
            type:[String,Number]//接收多个数据类型 String、Number、Boolean、Object、function、Symbol、Null
        },
        num:{
            type:Number,//数据类型
            required:true,//设置为必填
            validator:function(val){//设置自定义验证规则
                return val>1 && val<100;
                //如果父组件传递的数据不在这个范围内，则会在控制台中出现一个警告
            }
        },
        str:{
            type:String,
            default:"父组件没有给传递此值，什么也没有"//设置默认值
        }
    }
}
</script>
<style></style>

三、路由【重点】

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

1.基本使用

(1)安装

①初始化项目时选择安装vue-router

②手动安装

npm i vue-router --save

(2)基本使用

第一步：创建几个页面组件

第二步：在/src/main.js中引入vue-router插件，并引入页面组件、定义路由规则

import VueRouter from 'vue-router'
Vue.use(VueRouter)//在vue中使用插件【重要】
//引入页面组件
import Home from './components/Home'
import Movie from './components/Movie'
import Music from './components/Music'
var router = new VueRouter({
    //路由规则地址与页面组件的配置映射关系表
    routes:[
        { path:'/home',component:Home },
        { path:'/movie',component:Movie },
        { path:'/music',component:Music },
    ]
})

path属性表示浏览器地址关键词，要以斜杠开头

component属性表示路由地址关键词对应的页面组件

第三步：在/src/App.vue中添加路由出口组件

<div id="app">
    <!-- 
        路由出口 
        根据当前浏览器中的地址与路由规则映射表进行匹配，匹配到之后，就把对应的组件模板内容展示在路由出口的位置上。
    -->
    <router-view></router-view>
</div>

2.路由导航

(1)内置组件

router-link 会在页面上生成一个超链接。

属性：

①to

需要设置一个to属性，它的值是设置路由映射规则时的path属性值。

to属性的值，必须以斜杠开头，不然会出现地址异常的现象。

②active-class

active-class 非必填项，模糊匹配的类名，可以用来设置激活的导航类名

写在router-view上方或者下方的router-link会一直在页面中显示。

③exact-active-class

精确匹配的类名，只有访问的路由规则地址和to属性中一模一样时才会设置上对应的类名

(2)编程式导航

vue-router类的实例中给提供了一些方法，可以实现页面跳转

push 此方法会把当前访问的页面作历史记录，然后跳转到指定的路由规则上

replace 此方法会用即将跳转的路由规则地址替换当前访问的页面路由规则地址

go 此方法可以进行页面路由地址的回退，一般写-1，表示回退到上一个访问的页面

<button @click="$router.push('/movie')">前往电影页面</button>

<button @click="toMusic">前往音乐页面</button>

<script>
export default {
    methods:{
        toMusic(){
            this.$router.replace('/music')
        }
    }
}
</script>

<button @click="$router.go(-1)">返回</button>

3.路由重定向

如果需要展示默认的一个页面或者当用户输入不存在的路由规则时，扔让用户看到一个默认的页面时，可以使用路由重定向（路由地址跳转）。

routes:[
	....,
	{ path:'*',redirect:'/home' }
]

*表示所有的路由规则都没有匹配到

redirect表示要重定向到的路由规则path属性值

4.路由嵌套

第一步：再创建几个页面组件

第二步：在一级路由规则中添加一个children属性，它的值和routes数据类型相同，都是一个数组。

routes:[
    { path:'/home',component:Home },
    { 
        path:'/movie',
        component:Movie,
        children:[
            { path : 'guonei' , component:Guonei},
            { path : 'guowai' , component:Guowai}
        ]
    },
    { path:'/music',component:Music },
    { path:'*',redirect:'/home' }
    // {path:'*',component:Home}
]

子级路由规则的path属性不需要添加斜杠

第三步：在子级路由的父级路由规则对应的页面组件中添加router-view组件，用来展示子级路由规则对应的页面组件内容。

<template>
    <div class="movie">
        <h1>movie页面</h1>
        <router-link to="/movie/guonei">国内</router-link>
        <router-link to="/movie/guowai">国外</router-link>
        <router-view class="content"></router-view>
    </div>
</template>

5.路由传参

(1)动态路由

动态路由规则定义：

{ path:'/关键词/:参数名' }

冒号后面是一个参数名，能够在进行路由规则匹配时，能够匹配到任意的字符或者数字。

第一步：创建一个详情页面

第二步：在路由配置文件中定义一个动态的路由规则

{
	path:'/movieinfo/:mid',component:MovieInfo
}

第三步：在电影列表页面通过编程式导航进行页面跳转

 methods:{
     toInfo(id){
     	this.$router.push('/movieinfo/'+id)
     }
 }

第四步：在电影详情页面获取路由地址中的参数

<p>编号：{{ $route.params.mid }}</p>

(2)query查询参数

如果路由地址中的参数数量不固定时，使用动态路由就不合适了。

第一步：定义一个固定的路由规则

{
    // path:'/movieinfo/:mid',component:MovieInfo
    path:'/movieinfo',component:MovieInfo
}

第二步：在电影列表页面通过编程式导航进行页面跳转

methods:{
    // toInfo(id){//动态路由
    //     // this.$router.push('/movieinfo/'+id)
    // }
    toInfo(obj){//查询参数
        // this.$router.push('/movieinfo/'+id)
        this.$router.push({
            path:'/movieinfo',
            query:{
                movieid:obj.id,
                title:obj.title
            }
        })
    }
}

第三步：在电影详情页面获取路由地址中的参数

mounted(){
    console.log(this)
    // this.info = this.movies.find(item=>{
    //     return item.id == this.$route.params.mid
    // })
    this.info = this.movies.find(item=>{
    	return item.id == this.$route.query.movieid
    })
}