1.8

复

编程式路由导航

编程式路由 不使用router-link 是点击按钮触发的跳转 有历史记录的跳转(push)

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

 

methods: {
        pushShow(m) {
            //编程式路由 不使用router-link 是点击按钮触发的跳转 有历史记录的跳转(push)
            this.$router.push({
                name: 'xijie',
                query: {
                    id: m.id,
                    title:m.title
                },
               
        })
        },
        replaceShow(m) {
            this.$router.replace({
                name: 'xijie',
                query: {
                    id: m.id,
                    title:m.title
                },
               
        })
        }
    
 }

缓存路由组件

 <!--  缓存news数据 名字是组件名 不是路由名 -->
    <keep-alive include="News">
      <router-view></router-view>
    </keep-alive>

    <!-- 缓存多个数组数据 写成数组形式-->
    <!-- <keep-alive :include="['News','Message']">
      <router-view></router-view>
    </keep-alive> -->

两个路由中的生命周期钩子 

 activated() {
    this.timer = setInterval(() => {
      this.a -= 0.01
      if (this.a < 0) {
      this.a=1
    }
  },16)
  },
  //失活
  deactivated() {
    clearInterval(this.timer)
 }

全局前置路由 后置路由

//全局前置路由守卫   初始化， 路由切换之前被调用
router.beforeEach((to,from,next) => {
    //判断权限
    if (to.meta.isAuth) { //判断是否鉴权
        if (localStorage.getItem('school') == 'xiyou') {
            next() //放行
        }
        else {
            alert('学校名字不对 没有权限查看')
        }
    }
    //除了去xinwen xiaoxi   去其他组件都没有限制
    else {
        next()
    }
})


//全局后置路由守卫 初始化， 路由切换之后被调用
router.afterEach((to,from) => {
    //满足需求：通过鉴权后 切换后的标题改为相应的标题
    document.title=to.meta.title  || '案例'
})

独享路由守卫

//独享路由守卫
                    beforeEnter(to,from,next) {
                        //与全局前置路由守卫写法一样
                        if (to.meta.isAuth) { //判断是否鉴权
                            if (localStorage.getItem('school') == 'xiyou') {
                                next() //放行
                            }
                            else {
                                alert('学校名字不对 没有权限查看')
                            }
                        }
                        //除了去xinwen xiaoxi   去其他组件都没有限制
                        else {
                            next()
                        }
                    },

组件内路由守卫

beforeRouteEnter(to,from,next) {
    if (to.meta.isAuth) { //判断是否鉴权
        if (localStorage.getItem('school') == 'xiyou') {
            next() //放行
        }
        else {
            alert('学校名字不对 没有权限查看')
        }
    }
    //除了去xinwen xiaoxi   去其他组件都没有限制
    else {
        next()
    }
  },
    //通过路由规则离开该组件被调用
  beforeRouteLeave(to, from, next) {
    
      next()
 }

路由工作的模式

mode: 'history',//工作模式 默认是hash带/#/  

    //项目上线需要将前端写的进行打包 npm run build 生成dist文件 里面是html css js 文件 然后在服务器上托管静态资源

element-ui

完整引入

引入ElementUI组件库

import ElementUI from 'element-ui';

引入ElementUI全部样式

import 'element-ui/lib/theme-chalk/index.css';

ElementUI里全部的组件都被注册 体积过大

Vue.use(ElementUI);

 

//按需引入

import { Button,Row,DatePicker } from 'element-ui'

Vue.component(Button.name, Button);

Vue.component(Row.name, Row);

Vue.component(DatePicker.name,DatePicker );

 

 本周完成vue相关的复习