vue-router 学习记录

路由就是通过互联的网络把信息从源地址传输到目的地址的活动。

什么是前端渲染？什么是后端渲染？

1.后端路由阶段：后端处理URL和页面之间的映射关系
2.前后端分离阶段：后端只负责数据，不负责任何阶段的内容
3.单页面复用（SPA页面）阶段：整个网站只有一个HTML页面。
前端路由：管理URL和页面的映射关系

hash和history

//改变URL，页面不刷新
location.hash = 'home'
//h5新增history
history.pushState({},'','home')//类似于栈结构，pushSate相当于入栈，可以返回
history.replaceState({},'','home')//替换，不能反回
history.go(-1) //等同于 history.back()
history.go(2) //传入数字，跳到任意栈

将默认的hash模式改成history模式

//main.js中
new Vue({
  el: '#app',
  router,
  mode:;history
  components: { App },
  template: '<App/>'
})

rouer-link

router-link标签，默认渲染成a标签

//使用tag属性，渲染成button标签
<router-link tag='button'></router-link>
//使用replace方法，不能返回
<router-link tag='button' replace></router-link>
//选中的class名改成active
<router-link tag='button' active-class='active'></router-link>
//统一改 路由添加属性 linkActiveClass:'active'

通过代码跳转路由

this.$router.push('/home')		//可以返回
this.$router.replace('/home')	//不可以返回

动态路由的使用

//路由配置页面
{
	path:'/user/:userId',
	component:User
}
//跳转路由界面
<router-link :to="'/home/'+userId"></router-link>
//或者
this.$router.push('/home/'+this.userId)
//拿到userId
computed:{
	userId() {
		return this.$route.params.userId
	}
}
//或者
{{$route.params.userId}}

区分 $router和 $route

$router是router文件夹暴露出来的大的路由对象
$route是当前正在活跃的路由

路由懒加载

{
	path:'/home',
	component: () => import('../components/Home)
}

路由嵌套

{
	path:'/home',
	component: () => import('../components/Home),
	children:[
		{
			path:'news',
			component: () => import('*****')
		},
		//设置默认路径
		{
			path: '/',
			redirect: 'news'
		}
	]
}
//跳转
<router-link :to='/home/news'></router-link>

传递参数的方式

//传输
<router-link :to="{path:'/profile',query:{age:18,height:1.88}}"></router-link>
this.$router.push({
	path:'/profile',
	query:{age:18,height:1.88}
})
//取出
$route.query.age
$route.query.height

导航守卫：监听路由跳转

//前置钩子（guard），在路由跳转之前的回调
router.beforeEach((to, from, next) => {
	next()	//这里必须调next函数，否则路由不会跳转
	//从from跳到to
	document.title = to.matched[0].meta.title	//参数to，代表跳转过去的路由对象。mate：元数据（描述数据的数据）
})
//后置钩子（hook），路由调转后的回调
router.afterEach((to, from) => {
	//执行代码块
})
//路由独享守卫
routes: [
	{
		path: 'foo',
		component: Foo,
		beforeEnter: (to, from, next) =>{
			// ...
		}
	}
]