vue基础五

前端路由

随着 前后台分离 以及spa应用 产生的，前后台分离 网页http请求，指向的前端代码，此时spa应用，需要路由拦截 http请求，
网页请求：第一次 给 .html文件，根据路由 渲染 部分内容

spa:single page application:单页面应用
一个应用只有一个html,切换页面速度会特别快，webapp一般都是用 spa 
缺点：
	1，第一次打开 速度会比中正常慢
	2，seo特别不友好   
	服务端渲染ssr 解决这个问题
	
	默认是hash路由：
		网页地址 # 后面就是hash路由
		
		/
		
		/a
		/b

引入

const routes = [
	{
		path:"",
		component:xx,
		redirect:"/a"
	}
	,
	{
		path:"/a",
		compoent:Home
	},
	{
		path:"*",
		component:NotFound
	},{
		path:"/detail/:id"
	}
]

$route.params.id

const router = new VueRouter({
	mode:"hash",
	routes
});

new Vue({
	router
})

router-link 
	to
	tag
router-view

编程式导航：

除了router-link 声明式导航
还可以通过js 动态 切换路由以及传参

1,字符串
this.$router.push("/home");     router-link to="/home"
2，对象
	
		this.$router.push({
			path:"/home"       router-link :to="{ path:"/home" }"
		});

3，对象并传参
	1，传到 $route 的params属性上 前台 一定要通过命名路由 不能通过 path形式传
		this.$router.push({
			name:"home",
			params:{
				id:123
			}
		});
	注意：不能通过path 跳转路由，通过path 参数传不过去
		参数传过去后，如果刷新页面，参数会消失 所以不适用于列表页到详情页传参
	2，传到 $route.query属性  query的值 会放在url后面 ?连接 格式是 名字=值 多个值之间以&分割
		this.$router.push({
			path:"/home",
			query:{
				id:123
			}
		});
		this.$route.query.id
	注意：不要通过命名路由跳转 通过path跳转
		 刷新页面 数据不会丢失 适用于列表页向详情页传参
		 
	$router.replace(); 会覆盖前一个历史记录，即如果通过 $router.go(-1)无法回到上一步
	
	$router.go(n)  
		-1 刷新  history.back()
		0 刷新
		
		#/a
		#/b
		
		/a
		/b

导航卫士

进入某个路由 ---> 运行路由规则 -->渲染对应组件 router-view
在进入 这个路由之前 我们可以 通过导航卫士 进行拦截  相当于路由的拦截器，在拦截的钩子函数中做一些操作（如登录鉴权)，如果没有登录不允许访问某些页面（组件）

全局守卫   会拦截 所有的 路由
	全局 前置 守卫  ***********  
	

路由独享   只有确定的某个路由 用户访问了 才会拦截


组件内守卫  在路由组件中 拦截  作用域 同路由独享的守卫