vue-router

安装路由

npm install vue-router --save

在模块化工程中使用

第一步： 导入路由对象 并且调用 Vue.use(VueRouter)
	在scr 文件创建router 文件夹 创建 index.js
	
导入路由：import  VueRouter from "vue-router"
导入vue：import fVue form 'vue'
安装插件 Vue.use(VueRouter)
			const routers =[ // 路由和组件之间的关系
			]
创建VueRouter对象 ：const router =new VueRouter（{
	// 配置路由和组件之间的应用关系
	router,
	mode:'history' ,//设置路由模式
	linkActiveClass:'active'
	}）
注释：linkActiveClass当某一个router-link被选中时 都会加一个active 的类 方便	添加选中的类样式
配置好的路由 暴露出去 ：export default router
在 main.js 全局注册 ： import router from './router/index'
		new Vue ({
		el:'#app',
		router:router, // 把路由全局注册
		})

配置路径信息

在router文件夹下的 index.js 中配置路径信息  
	需要先导入这个文件
	import Nam from 'name的路径'
	const routers =[
		path：'路径信息' // 页面要跳转的地址,
		name："这个路由的名字",
		component:"Nam "
			]
	或者直接在 component： () => import('@/pages/myparticipate/index.vue') 中直接导入路径信息 
	注释：@是项目src路径

router-link 的使用

<router-link to="/home（需要传递的参数）" tag="button" replace> 
注释：to 需要跳转的路径信息
注释：tag可以改变router-kink默认渲染的标签 
注释：replace 不会留下记录 浏览器默认后退键不能用

router-view 的使用

组件在 app.vue的显示 位置 类似占位符

this.$router.push 的使用

this.$router.push('/home') 
this.$router.replace('/home') // reolace 不能进行后退
this.$router.push({
naem:'home' // 需要跳转的路径名称
params:{
item:e   // 页面跳转传递的参数
}
})

动态路由

可以在路由配置映入关系的时候动态获取用户的id
{ //配置路由的时候
path："/home/:id",
component:()=>import('@/paser/home.vue)
}
传递参数的
	<router-link :to="/home/"+3 tag="button" replace> 
获取用户传递的参数  
	this.$route.params.id  
	注释 :id 必须写配置路由的 id

路由的懒加载

在打包过的js文件中 如果只有三个文件说明没有使用路由懒加载
使用路由懒加载
	const hom=（）=>import('@/home.vue') 异步导入文件
	{
	path:"/home"
	component: hom
	}

路由嵌套

	配置路由嵌套
	{
	path:'/'
	redirect:'hom' // 路由重定向
	children：[ // 子路由
		{
		path:'new'  // 在子路由中不能 写 /
		component: new
	},
			{
		path:'news'  // 在子路由中不能 写 /
		component: news
	}
	]
}
// 跳转
	<router-link :to="/home/new" tag="button" replace>  
	<router-link :to="/home/news" tag="button" replace>  

路由传参

两种类型
	params的类型
		路由配置格式：/route/:id
		传递的方式 在path后面跟上对应的值
		传递：this.reuter.push('@/home'+this.id)
		传递后的形形成的路径：/router/123, /routre/abc
	query 的类型 //时候传递参数比较多的
		配置路由格式：/router 普通配置
		传递的方式：对象中使用query的key作为传递的方式
		传递：this.router.push({ path:'@/hom',query{
			name:zs,
			id:18
		})             
		传递后形成的路径 /router?id=123,/retuter/?id=abc

导航守卫

	在router index.js文件配置导航守卫 //动态配置title
		router.beforEach((to,from,next)=>{  // 前置钩子函数  需要 添加 next
			document.title=to.matched[0].meta.title
		next（）
})
注释：从form 页面页面   跳到 to 页面
路由的配置 {
path：‘/index’,
component:index,
meta:{ //如果想动态配置title 需要在路由规则内添加 meta对象进行设置
title:'首页'
}
}
后置钩子函数
afterEach((to,from)=>{

})

keep-alive

keep-alive 是vue内置的一个组件  可以使用被包含组件保留状态  避免重新渲染
router-view 也是一个组价 如果直接 被包在keep-alive里面 所有路径匹配到的视图组件都会被缓存