2020年5月29日 星期五
If you lose your purpose, it's like you are broken.
今天呢主要学习了Vue递归组件；并且实现多级列表分类的个小案例，自己呢也进行了一个总结，写了一个博客，还有老大带着我们复习了Vue的路由(Router)。
Vue递归组件
那什么是递归呢？
简单来说就是在组件中内使用组件本身
总结的博客链接：blog.csdn.net/qq_43036190…
Vue的路由
目前前端路由的实现方法主要有两种方法，location.hash和window.history
1、通过location.hash实现前端路由
hash就是一个url中#后面的部分，也叫做url的锚部分，锚部分在服务器端会被自动忽略，但
是在浏览器中是可以通过loaction.hash来获取的。通过hash方法实现前端路由主要是用到的
是onhashchange事件，这个事件可以实时监听url中hash值的变化，由此来根据hash值的变化
进行一些DOM的切换操作。
2、通过window.history和popstate实现前端路由
浏览器窗口会为用户提供一个history对象，用来保存用户操作页面的历史，我们在浏览网页时的前
进后退操作都是基于这个对象来实现的。在前端路由的实现过程中主要用到了history对象里的hist
ory.pushState()和history.replaceState()，这两个接口。
Vue路由模式有哪几个?
Hash: 使用URL的hash值来作为路由。支持所有浏览器。,带# 【默认】
优点：兼容性好，不需要后端配置
缺点：路径不美观 例如：http://127.0.0.1:9999/#/shopping
History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式
优点：路径美观 http://127.0.0.1:9999/shopping
缺点：有兼容性和需要后端配置，如果后端不配置路径重定义，点击页面会报打不开的错误
Vue路由懒加载
const Home = () => import('../views/home.vue');
Vue路由如何传参，动态路由
1、使用<router-link to="/"><router-link>（query传参:）
<router-link to="/路径?名称=会传递的值">内容</router-link>
或
<router-link :to="{path:'/user',query:{ name:'1906A' }}">内容</router-link>
在视图中接收：
<div>User {{ $route.query.name }}</div>
在vue生命周期中接收： this.$route.pquery.name
2、使用<router-link to="/"><router-link>（params传参）
<router-link to="/路径/会传递的值">内容</router-link>
例如：
<router-link to="/user/1906A">/user/bar</router-link>
1)、路由配置：
const router = new VueRouter({
routes: [
{ path: '/user/:name', component: User }
]
})
在视图中接收：
<div>User {{ $route.params.id }}</div>
在vue生命周期中接收：this.$route.params.id
路由守卫（或称为路由钩子函数）
路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。
一、全局前置守卫beforEach
守卫方法接收三个参数：to\ from \ next
to：即将要进入的目标路由对象
from：当前导航正要离开的路由
next：执行下一步
代码演示：
/**
* @param {to} 将要去的路由
* @param {from} 出发的路由
* @param {next} 执行下一步
*/
router.beforeEach((to, from, next) => {
document.title = to.meta.title || '卖座电影';
if (to.meta.needLogin && !$store.state.isLogin) {
next({
path: '/login'
})
} else {
next()
}
})
二、全局后置钩子afterEach
全局后置钩子与全局前置守卫类似，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身
router.afterEach((to, from) => {
// ...
})
三、路由独享的守卫beforeEnter
使用方法与全局守卫相同,不同的是：全局守卫可以作用于全局，路由独享守卫只作用于被设置守卫的路由
//登录模块
path: '/login',
component: () => import('@/views/login'),
beforeEnter: (to, from, next) => {
if (to.meta.needLogin && !$store.state.isLogin) {
next({
path: '/login'
})
} else {
next()
}
}
四、组件内的守卫
可以在路由组件内直接定义以下路由导航守卫：
1）beforeRouteEnter
2）beforeRouteUpdate
3）beforeRouteLeave
1> beforeRouteLeave
在渲染该组件的对应路由被 confirm 前调用(可以通过 next 获取data中的数据)
获取组件实例 this，因为当守卫执行前，组件实例还没被创建
data() {
return {
name: "Grayly"
};
},
beforeRouteEnter: (to, from, next) => {
next(vm => {
alert("hello" + vm.name);
})
},
2> beforeRouteUpdate
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
3> beforeRouteLeave
这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消;(可以访问组件实例 this)
beforeRouteLeave: (to, from, next) => {
if (confirm("你确定要离开吗") == true) {
next();
} else {
next(false);
}
},
历史回退
第一种：history.back();
第二种：this.$router.go(-1); // 返回上一页
this.
router的区别是什么
this.$route：获取路由参数
this.$router：跳转页面
路由404页
// 匹配不符合上面路径的路由
{
path: '/*',
component: NotFound
}
响应路由参数的变化
动态路由传参：如果给一个路由组件传递不同参数，如何响应参数的变化，主要通过watch来监听$route
watch:{
$route(to,from) {
console.log('watch:',to.params.type)
}
},
嵌套路由:可以实现二级路由，三级路由......
通过配置路由的children和要在哪个页面展示对应路由的router-view配合实现
例如：
{
path: '/home',
component: Home,
children: [
{ //配置默认的二级路由
path: '',
component: Home1
},
{
path: 'home2',
component: Home2
},
{
path: 'home3',
component: Home3
}
]
},
命名视图
可以在一个组件中展现多个组件视图
{
path: '/my',
component: My,
//嵌套路由
children: [
{
path: '',
components: {
//在My组件中添加2个视图页面
my_banlance: My2,
my_order: My3
}
}
命名路由
{
path: '/home',
name: 'home', //通过给路由命名
component: home,
}
