<button @click="pushShow(m)">push查看</button>
<button @click="replaceShow(m)">replace查看</button>

methods:{pushShow(m){this.$router.push({//不要去找route，route是一个规则，router是路由器，让干啥干啥name:'xiangqing',query:{id:m.id,title:m.title}})},replaceShow(m){this.$router.replace({//不要去找route，route是一个规则，router是路由器，让前进就前进name:'xiangqing',query:{id:m.id,title:m.title}})}}

      <button @click="back">后退</button><button @click="forward">前进</button><button @click="go">测试一下go</button>

 methods: {back() {this.$router.back();},forward() {this.$router.forward();},go(){this.$router.go();//填一个数字，正数的话就是前进x步，负数就是后退x步}},

        <keep-alive include="myNews"><!-- 只有myNews可以保留缓存 --><router-view></router-view></keep-alive>

<keep-alive :include="['myNews','myMessage']">

<template><ul><li :style="{ opacity: opacity }">欢迎来到90年代</li><li>news001 <input type="text" /></li><li>news002 <input type="text" /></li><li>news003 <input type="text" /></li></ul>
</template><script>
export default {name: "myNews",data() {return {opacity: 1,};},// beforeDestroy() {//   clearInterval(this.timer);// },// mounted() {//   this.timer = setInterval(() => {//     console.log("定时器执行");//     this.opacity -= 0.01;//     if (this.opacity <= 0) this.opacity = 1;//   }, 16);// },activated() {this.timer = setInterval(() => {console.log("定时器执行");this.opacity -= 0.01;if (this.opacity <= 0) this.opacity = 1;}, 16);},deactivated() {clearInterval(this.timer);},
};
</script>

export default new VueRouter({routes:

//全局前置路由守卫
//暴露之前加一个路由守卫,指定路由切换之前、初始化的时候调用的一个函数
router.beforeEach((to, from, next) => {//不调next啥都给你拦住//学校名atguigu才放if (to.path == 'myHome/myNews' || to.path == 'myHome/myMessage') {if (localStorage.getItem('school') == 'atguigu') {//要是去news或者message不让你看next()}else{alert('学校不对！')}}else{next()}
})
export default router

children: [{path: 'myNews',component: myNews,meta:{isAuth:false}//是否授权，不用的那些写都不用写//一级路由下的孩子路径就不用加/了},{name: 'xiaoxi',path: 'myMessage',component: myMessage,meta:{isAuth:false},

if (to.meta.isAuth) {//判断是否有权限if (localStorage.getItem('school') == 'atguigu') {//要是去news或者message不让你看next()}else{alert('学校不对！')}}else{next()}

meta:{title:'关于'}

router.beforeEach((to, from, next) => {
document.title=to.meta.title

document.title=to.meta.title||'硅谷'

router.beforeEach((to, from, next) => {//不调next啥都给你拦住//学校名atguigu才放if (to.meta.isAuth) {//判断是否有权限if (localStorage.getItem('school') == 'atguigu') {//要是去news或者message不让你看document.title = to.meta.title || '硅谷'next()} else {alert('学校不对！')}} else {document.title = to.meta.title || '硅谷'next()}
})

router.beforeEach((to, from, next) => {//不调next啥都给你拦住//学校名atguigu才放if (to.meta.isAuth) {//判断是否有权限if (localStorage.getItem('school') == 'atguigu') {//要是去news或者message不让你看next()} else {alert('学校不对！')}} else {next()}
})
//全局后置路由守卫指定路由切换之后、初始化的时候调用的一个函数
router.afterEach((to, from) => {//它没有next，前置是切换前调用next我就往下走，后置切换完成了不需要nextconsole.log(to,from)document.title = to.meta.title || '硅谷'
})

                    name: 'xiaoxi',path: 'myMessage',component: myMessage,beforeEnter: (to, from, next) => {if (to.meta.isAuth) {//判断是否有权限if (localStorage.getItem('school') == 'atguigu') {next()} else {alert('学校不对！')}} else {next()}},

<script>
export default {
name:'myAbout',
beforeRouteEnter (to, from, next) {// 通过路由规则，进入该组件时被调用console.log('组件内路由守卫', to, from);if (to.meta.isAuth) {   //判断是否需要鉴权if (localStorage.getItem('school') === 'hznu') {next();  } else {alert('学校名不对！');}} else {next(); //放行}
},
beforeRouteLeave (to, from, next) {// 通过路由规则，离开该组件时被调用next()//得放行啊//注意那个document的title可不能在这儿写，那是后置的
}
}
</script>

const router = new VueRouter({mode:'history',