Vue2(四）

一、Vue核心

点此处去查看·Vue核心

二、Vue组件化编程

点此处去查看·Vue组件化编程

三、Vue脚手架

点此处去查看·Vue脚手架

四、Vue中的ajax

点此处去查看·Vue中的ajax

五、Vuex

点此处去查看·Vuex

六、Vue-router

6.1相关理解

6.1.1 vue-router的理解

vue的一个插件库，专门用来实现SPA应用

6.1.2对SPA应用的理解

1. 单页Web应用(single page web application，SPA)。
2. 整个应用只有一个完整的页面。
3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
4. 数据需要通过ajax请求获取。

6.2基本路由

1.安装vue-router，命令:npm i vue-router
2.应用插件:Vue.use(VueRouter)

//引AvueRouter
import VueRouter from 'vue-router'
//引ALuyou组件
import About from '../ components /About'
import Home from '../ components /Home '
//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
routes:[
		{
			path: '/about ',
			component:About
		},
		{
			path : " / home ' ,
			component : Home
		}
	]
})
//暴露router
export default router

4.实现切换(active-class可配置高亮样式)

<router-link active-class="active" to="/about">About</router-link>

5.指定展示位置

<router-view></router-view>

6.注意点

1. 路由组件通常存放在pages文件夹，一般组件通常存放在 components文件夹。
2. 通过切换，“隐藏"了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的$ route属性，里面存储着省己的路由信息。
4. 整个应用只有一个router，可以通过组件的$router属性获取到。

6.3嵌套路由

1.配置路由规则，使用children配置项:

routes: [
	{
		path : '/about' ,
		component:About,
	},
	{
		path : '/ home' ,
		component : Home,
		children: [ //通过children配置子级路由
			{
				path: 'news',  //此处一定不要写:/news
				component:News
			},
			{
				path: 'message' ,//此处一定不要写:/message
				component : Message
			}
		]
	}
]

2.跳转(要写完整路径)∶

<router-link to=" /home/news" >News</router-link>

6.4路由传参

6.4.1 query传参

1.传递参数

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

2.接收参数;

$route.query.id
$route.query.title

6.4.2 params传参

1.配置路由，声明接收params参数

{
path: '/home' ,
component :Home,
children : [
	{
		path:'news ',
		component: News
	},
	{
		component: Message,
		children : [
			{
				name : 'xiangqing ',
				path: 'detail/:id/:title',//使用占位符声明接收params参数component : Detail
			}
		]
	}
}

2.传递参数

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

特别注意:路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置!
3.接收参数:

$route.params.id
$route.params.title

6.4.3. 路由的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
		}
	}
}

6.4.4 router- link的replace属性

1.作用:控制路由跳转时操作浏览器历史记录的模式
⒉浏览器的历史记录有两种写入方式:分别为push和replace,push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
3.如何开启replace模式:<router-link replace ..... . .>News</router-link>

6.5编程式路由导航

1.作用:不借助实现路由跳转，让路由跳转更加灵活
2.具体编码:

// $router的两个API
this.$router.push({
	name : " xiangqing ',
	params : {
		id :xxx,
		title: xXX
	}
})
this.$router.replace({
	name : "xiangqing ',
	params :{
		id :xxx,
		title :xxx
	}
})
this.$router.forward()//前进
this.$router.back()//后退
后退this.$router.go()//整数前进负数后退

6.6 缓存路由组件

1.作用:让不展示的路由组件保持挂载，不被销毁。
2.具体编码:

<keep-alive include="News">
	<router-view></router-view>
</keep-alive>
<!--缓存多个路由组件-->
<!-- <keep-alive :include="[ "News ' , ' Message ']">-->

6.7 路由的生命周期钩子

1.作用:路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
2.具体名字:

1. activated 路由组件被激活时触发。
2. deactivated 路由组件失活时触发。

6.8 路由的守卫

1.作用:对路由进行权限控制
2.分类:全局守卫、独享守卫、组件内守卫

6.8.1 全局守卫:

//该文件专门用于创建整个应用的路由器

import VueRouter from "vue-router";
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import news from '../pages/News.vue'
import Message from '../pages/Message.vue'
import Detail from '../pages/Detail.vue'
const router=new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },
        {
            name:'jia',
            path:'/Home',
            component:Home,
            meta:{title:'家'},
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:news,
                    meta:{isAuth:true,title:'新闻'}
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:'消息'},
                    children:[
                        {
                            name:'zhanshi',
                            path:'detail',
                            component:Detail,
                            meta:{isAuth:true,title:'显示'},
                        },
                    ]
                },

            ] 
        }
    ]
})
//全局前置守卫
router.beforeEach((to,from,next)=>{
    if(to.meta.isAuth){
        //在localStorage设置了un
        if(localStorage.getItem('un')==='YoRHa'){
            next()
        }else{
            alert('该用户没有权限')
        }
    }else{
        next()
    }
})

//全局后置守卫
router.afterEach((to)=>{
    document.title=to.meta.title
})

export default router

6.8.2 独享守卫:

beforeEnter: (to, from, next) => {
   if(to.meta.isAuth){
        //在localStorage设置了un
        if(localStorage.getItem('un')==='YoRHa'){
            next()
        }else{
            alert('该用户没有权限')
        }
    }else{
        next()
    }
}

6.8.3 组件内路由守卫

//进入守卫:通过路由规则，进入该组件时被调用
beforeRouteEnter (to，from，next) {
},
//离开守卫。通过路由规则，离开该组件时被调用
beforeRouteLeave (to，from，next) i
}

6.9 history模式hash模式

1. 对于一个url来说，什么是hash值?——#及其后面的内容就是hash值。
2. hash值不会包含在HTTP请求中，即:hash值不会带给服务器。
3. hash模式:
   1). 地址中永远带着#号，不美观。
   2).若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
   3).兼容性较好。
4. history模式:
   1).地址干净，美观。
   2).兼容性和hash模式相比略差。
   3).应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

七、Vue UI组件库

element ui
Ant Design of Vue

八、Vue2案例的全部代码

点此处去·下载代码