vue 基础

一：跳转

1.跳转

lookMore() {

//接参，传参
//1: var id=window.location.href.split("=")[1]

//2:let id = that.$route.query.schoolid   let id = that.$route.params.id
        this.$router.push({path:'/look_more',params:{id:1},query:{schoolid:id}})
      },

2.行内跳转list在data定义，接口中定义

 let list = response.data.data.data;
          this.list = list;

 <router-link  :to="{path:'/schoolcoll_detail',query: {id:y.id}}" v-for="y in list"> </router-link> 

3.多个传值跳转

<router-link  :to="{path:'/job_detail',query: {id:jobs.id,ski:id}}" v-for="jobs in job"> </router-link>

4.method 里传值

 <span v-for="kc1 in kc" class="kckc" @click="lesson_yy(kc1.id)">
                 {{kc1.name}}
</span>

       lesson_yy(id){
this.$router.push({name:"xxx",query{id:id}})
      },

5,数据传送

this.$router.push({
          name: "more",
          query: {evaluates: JSON.stringify(this.list.evaluate)}
        })

二：反向代理配置

vue3.0新建vue.config.js

moudle.exports={
devServer:{
proxy:{
 'napi':{
   target:'http://xxx',
   changeOrigin:true
        }
      }
          }
               }

main.js引入

importaxios from 'axios'

vue.prototype.$http=axios

装axios 重启项目

需要的页面

created(){
this.$http({
          url:'/xxx/',//参数前
          params:{//参数
            start: 0,
            include_fields: 'sender,album',
            limit: 24,
            _:Date.now()//时间戳
          }
        })
          .then(res=>{
            console.log(res)
            this.list=res.data.data
          })
          .catch(error=>{
            if(error) throw error
          })
}

 

vue cl2 找 proxyTable-所在config修改

proxyTable：{

‘napi’:{

target:'http://m.xxx',

changeOrigin:true

}

}

三：全局导航守卫

main.js

router.beforeEach((to,from,next)=>{
const name=localStorage.getItem('name');
if( name || to.path === 'login'){//有用户名跳首页，没有跳登录
next()
}else{
next('/login)
}
})
上下不能一起用
router.afterEach(route=>{
if(to.path==='/login' || to.path==='/register'){
//用户可能在书写用户输入，如不小心点到其他地方
if(confirm('要离开改页面吗？')){

}
}
})

 路由独享守卫（1种）

{
path:'/heme',
component:Home,
beforeEnter(to,from,next){
alert('您要进入吗')
next()
//可设置用户权限
}
}

 

组件内守卫（3种组件内的前置/后置/更新守卫）

<template>
<div>
login
</div>
</template>

<script>
import axios from 'axios'
 export default {

beforeRouteEnter(to,from,next){
//这个时候组件没创建  没有this
// 业务：浏览器存储中如果有用户名，就登录，没有就跳转注册页
const username=localStroage.getItem('username')
if(username){
next()
}else{
next('/register')
}

//进入组件前进行axios请求获取数据
axios({
url:'xx',

})
.then(res=>{
next(vm=>{
vm.$set(vm.login,'data',res)//赋值
})
next()
})
.catch(error=>{
if(error)throw error
})
}
data(){
return{
login:null
}
}
}
</script>

//点击其他页面跳转前的提示
beforeRouteleave(to,from,next){
//有this
if(this.username||this.password){//如果有值
  if(confirm('要离开改页面吗？')){
      next()
    }else{
      next(false)
    }
  }else{
     next()
  }
}

 更新守卫在路由里用

beforeRouterUpdate(to.from,next){//一般动态路由用
   console.log('路由变了')
   next()
}

四：定义标签  tag='li'  遍历出来的标签为li

<ul>
<router-link  tag='li' v-for='' :key='' :to=''></router-link>
</ul>

vue router-link这个组件加上keep-alive属性可以进行浏览器缓存，不会出现多次切换（network）