路由router小知识

1.局部刷新

2.<router-link>组件替代了<a>，这个组件接受以下属性参数：

（push方法其实和<router-link :to="...">是等同的。push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。）

• to

一个路径字符串，或者一个Location Descriptor对象。
eg: <router-link to="/" class="nav-link">主页</router-link>，而且to这个属性是可以动态绑定地址的。

<script>
export default{
data(){
  return{
     homeLink:'/'
     }
   }
}
</script>

上面的就应该写成绑定的形式
eg: <router-link :to="/" class="nav-link">主页</router-link>有个冒号，是:to

• tag

渲染的html元素类型，默认是<a>。（就是说可以给路由换便签，原本是a标签，<router-link tag="div" to="/" class="nav-link">主页</router-link>，然后你现在的router就会变成div标签）

• exact

用于控制当前激活项的匹配行为（严格匹配或者贪婪匹配）。

• append

控制相对链接路径的追加方式。

• replace

替代而不是作为历史条目压榨你。

• active-class

当前链接项激活时增加的css样式。

3.在.js里面配置路由转跳

Vue.use{路由名字}

const routes={
	{
		path:'/',
		component:Home	
	},
	{//重定向
		path:'*',
		redirect:'/'
	},
	{
	    path: "/about",
	    name: "About",
	    // route level code-splitting
	    // this generates a separate chunk (about.[hash].js) for this route
	    // which is lazy-loaded when the route is visited.
	    //路由级代码拆分这将为此路由生成一个单独的块（关于[hash].js）当访问路由时，它是延迟加载的。
	    component: () =>
	      import(/* webpackChunkName: "about" */ "../views/About.vue"),
	  },
}

const router=new 路由名字（{
	routes,
	mode:'history'	
}）

4.路由绑定方式

a.
name:可以给这个路由一个名字，然后再动态绑定。

<router-link  :to="{name:'homeLink'}" class="nav-link">主页</router-link>

const routes={
	{path:'/',name:"homeLink",component:Home},
	{path:'*',redirect:'/'}
}

b.

<button @click="a" class="btn btn-success">跳转</button>

<script>
export default{
	methods:{
		a(){
			this.$router.go(-1)//跳转到上一个页面
			this.$router.replace('/home')//跳转到指定地址
			this.$router.replace({name:'homeLink'})//根据名字跳转
			this.$router.push('/home')//通过push进行跳转
			this.$router.back() //后退
			this.$router.forward() //前进
			}
		}
	}
</script>

5.二级路由和三级路由（路由嵌套）

后面直接加children[]

const routes={
{path:'/',name:"homeLink",component:Home,
children:[{path:'/about',name:"aboutLink",component:about}]},//二级路由，再类似嵌套即可获得三级路由
}

6.路由全局守卫

router.beforeEach((to,from,next)=>{
	if(to.path =='/login'|| to.path=='/register'){
		next();
	}else{
		alert("还没登陆")；
		next('/login');
		}
})

to: Route，代表要进入的目标，它是一个路由对象
from: Route，代表当前正要离开的路由，同样也是一个路由对象
next:是对应的函数，展示你要的页面

7.后置钩子

(不同于前置守卫，后置钩子并没有 next 函数，也不会改变导航本身:)（afterEach）

router.afterEach((to,from)=>{
	alert("aa");
})

8.路由独享

（beforeEnter）

{
	path:'/about',
	name:"aboutLink",
	component:about,
	beforeEnter:(to,from,next)=>{
		alert("非登陆状态不可访问");
	}
}

9.组件内的守卫

（beforeRouteEnter）
（在进入页面之前可以进行操作，离开页面也可以进行操作）
访问不到data的属性的，例如

<script>
export default{
	data(){
		return{
			name:"henry"
		}
	},
	beforeRouteEnter:(to,from,next)=>{
		alert("Hello"+this.name);
	}
}
</script>

就会打印出Hello undefined
但是组件内的next可以对应一个回调函数(这里是异步的，所以可以拿到data)

<script>
	export default{
		data(){
			return{
				name:"henry"
			}
		},
		beforeRouteEnter:(to,from,next)=>{
			next(vm =>{
				alert("Hello"+vm.name);
			})
		}
}
</script>

就会打印Hello henry

离开组件前做的操作（用处：例如有些事件用户还没保存就离开，我就提醒你，你选择确定，就离开，选择取消就留在当前页面）

beforeRouteLeave:(to,from,next)=>{
	if(confirm("确认离开吗")==true){
		next()//true就是离开
	}else{
		next(false)//留在当前页面
	}
})

箭头函数

JS箭头函数和function的区别：

1. 箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
2. 箭头函数不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
3. 箭头函数不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
4. 不可以使用yield命令，因此箭头函数不能用作Generator函数。

钩子函数：

所谓回调函数，一般就是把函数的地址作为参数传进去，让调用的函数在内部可以调用这个函数。
钩子函数，严格算起来，也算是回调函数的一种。但钩子函数是针对的截取的，当你使用了钩子之后，每当触发到相对应的消息，系统就会先“执行你写的回调函数”。
即原本是：系统–>目标函数
使用钩子就变成：系统–>你写的回调函数–>目标函数

router和route的区别：

router:

用 js 的方式来实现跳转时，而不是 router-link
例4.b

<button @click="a" class="btn btn-success">跳转</button>

<script>
export default{
	methods:{
		a(){
			this.$router.go(-1)//跳转到上一个页面
			
			this.$router.replace('/home')//跳转到指定地址
			this.$router.replace({name:'homeLink'})//根据名字跳转

			this.$router.push('/home')//通过push进行跳转
			// 字符串
     	    this.$router.push('home')
			// 对象
			this.$router.push({ path: 'home' })
			// 带查询参数
			this.$router.push({ name: 'home', params: { id: 123 }})
			// url变成 /home?id222=123
			this.$router.push({ path: 'home', query: { id222: '123' }})
			
			this.$router.back() //后退
			this.$router.forward() //前进
			}
		}
	}
</script>

route:

import Router from "vue-router";//当前项目的每一个vue组件，都会自动获取到一个 $route 数据