什么是vue-router:
你晓得什么是vue-router?不晓得?来,我们一起来看看vue-router官网:https://router.vuejs.org/zh/
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
一.嵌套的路由/视图表
(1).什么叫嵌套的路由?嵌套的路由顾名思义就是路由的多层嵌套,参照官网的例子
<div id="app"> <router-view></router-view></div>
const User = {
template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2>
<router-view></router-view> </div> `
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功， // UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile', component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的 <router-view> 中 path:
'posts', component: UserPosts
}
] }
]
})
(2)那嵌套的视图表呢?嵌套的视图表顾名思义就是视图的多层嵌套,在上面代码中
<router-view></router-view>就是一个视图,在router-view里面嵌套了子路由router-view
这就相当于一个多层视图的嵌套.
二.模块化的、基于组件的路由配置
(1)上列代码中,路由配置是一个组件,组件下面是路由配置,是模块化的
三.路由参数、查询、通配符
(1)路由参数:路由参数就是在路由后边传给另一个路由的参数,然后另一个路由接收参数,
路由的传参有三种方法:
1.<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button @click="routerTo">click here to news page</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
} },
methods:{
routerTo(){
//传递参数
this.$router.push({ name: 'news', params: { userId: 123 }}
);
} }}
</script>
<style>
//组件接受参数
//组件名字为news
<template> <div> this is the news page.the transform param is {{this.$route.params.userId}} </div> </template> <script> </script>
此处用的是
第一种方法:this.$router.push({ name: 'news', params: { userId: 123 }});
第二只方法是 this.$router.push({ path: '/news', query: { userId: 123 }});
第三种方法是 <router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>
四.基于 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值就是red let 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，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的,不玩虚的。
八.自定义的滚动条行为
网友评论