什么是vue|什么是vue router 什么是vuerouter

什么是vue-router: 你晓得什么是vue-router?不晓得?来,我们一起来看看vue-router官网:https://router.vuejs.org/zh/
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
一.嵌套的路由/视图表

(1).什么叫嵌套的路由?嵌套的路由顾名思义就是路由的多层嵌套,参照官网的例子

const User = {
template: `User {{ $route.params.id }}
`
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功， // UserProfile 会被渲染在 User 的中
path: 'profile', component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的中 path:
'posts', component: UserPosts
}
] }
]
})

(2)那嵌套的视图表呢?嵌套的视图表顾名思义就是视图的多层嵌套,在上面代码中
就是一个视图,在router-view里面嵌套了子路由router-view
这就相当于一个多层视图的嵌套.

二.模块化的、基于组件的路由配置

(1)上列代码中,路由配置是一个组件,组件下面是路由配置,是模块化的

三.路由参数、查询、通配符

(1)路由参数:路由参数就是在路由后边传给另一个路由的参数,然后另一个路由接收参数,
路由的传参有三种方法:
1.

//组件接受参数
//组件名字为news

此处用的是
第一种方法:this.$router.push({ name: 'news', params: { userId: 123 }});
【什么是vue|什么是vue router】第二只方法是this.$router.push({ path: '/news', query: { userId: 123 }});
第三种方法是 click to news page

四.基于 Vue.js 过渡系统的视图过渡效果

参考网址:https://www.jb51.net/article/123648.htm
(1). 状态动画,当数据变化时,动画会更新,通过watcher，能监听到任何数值属性的数值更新.
watch: {}
(2) 动态状态转换
(3) 组件组织过渡

五.细粒度的导航控制
六.带有自动激活的 CSS class 的链接
七.HTML5 历史模式或 hash 模式，在 IE9 中自动降级

一. vue-router有两种模式，hash模式和history模式,
hash模式:
hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:
window.onhashchange = function(event){console.log(event.oldURL, event.newURL); //此方法会直接取到路由后边的值例如:http://music.163.com/#/red//hash值就是redlet hash = location.hash.slice(1); document.body.style.color = hash; };
hash发生变化url浏览器都会被记录下来,从而会发现浏览器的前进还是后退都可以用了,点击后退时,页面的字体会发生变化.
History模式
随着history api的到来，前端路由开始进化了,前面的hashchange，你只能改变#后面的url片段，而history api则给了前端完全的自由
history主要有两个部分:切换和修改
第一部分:
切换:history.go(-1); //后退一次
history.go(1); //前进一次
history.back(); //后退
history.forword(); //前进
第二部分:
修改:其中有两个状态:pushState replaceState; 会接收三个参数:stateObject,title,url
pushstate:通过pushstate把页面状态放到state里面,当页面的url再次回到之前的url之后,可以通过event.state 来获取这个state的对象,以此对原页面进行还原,
history.pushState({color:'red'},'red','red');
windows.onpopstate=function(even){
console.log(even.state);
console.log(even.state.color);
}
通过history api，我们丢掉了丑陋的#，但是它也有个毛病：不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的,不玩虚的。