[JavaScript知识库]第六章-Vue路由

第六章-Vue路由

1、路由简介

SPA单页面应用。导航区和展示区

1. 单页Web应用
2. 整个应用只有一个完整的页面
3. 点击页面中的导航连接不会刷新页面，只会做页面的局部更新
4. 数据需要通过ajax请求获取

路由：路由就是一组映射关系，服务器接收到请求时，根据请求路径找到匹配的函数处理请求，返回响应数据

2、基本路由

main.js

// 引入vue
import Vue from 'vue'
import App from './App.vue'
import {mixin} from "@/mixin";
import VueResource from 'vue-resource'
import store from './store'
import VueRouter from 'vue-router'
// 引入路由器
import router from './router'
Vue.config.productionTip = false;
Vue.mixin(mixin)
Vue.use(VueRouter)
// const Demo=Vue.extend({})
// const d = new Demo
// Vue.prototype.x= d
// 使用插件
Vue.use(VueResource)


new Vue({
    el: '#app',
    render: h=>h(App),
    store: store,
    beforeCreate() {
        Vue.prototype.$bus = this // 安装全局事件总线
    },
    router:router
})

router/index.js

// 创建整个应用的路由器
import VueRouter from 'vue-router'
import School from '../components/School'
import Student from '../components/Student'
// 创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path: '/school',
            component:School
        },
        {
            path: '/student',
            component:Student
        }
    ]
})

使用App.vue

<template>
  <div>
    <router-link to="/school">school</router-link>
    <br/>
    <router-link to="/student">student</router-link>
    <router-view/>
<!--    <Student/>-->
<!--    <School/>-->
  </div>
</template>

3、嵌套路由

子路由不需要加/

配置项加一个children

index.js

// 创建整个应用的路由器
import VueRouter from 'vue-router'
import School from '../components/School'
import Student from '../components/Student'
import Detail from '../components/Detail'
// 创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path: '/school',
            component:School
        },
        {
            path: '/student',
            component:Student,
            children:[
                {
                    path:'detail',
                    component:Detail
                }
            ]
        }
    ]
})

4、路由传参

this.$route.

to的字符串或者对象

Student.vue

<template>
  <div>
    <p>当前求和为:{{$store.state.a.sum}}</p>
    <p>当前求和放大10倍为:{{bigSum($store.state.a)}}</p>
    <p>学生姓名是:{{$store.state.a.name}}</p>
<!--    强制转换为Number-->
    <select v-model.number="n">
<!--      得到的是字符串-->
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="INCREMENT(n)">+</button>
    <button @click="DECREMENT(n)">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>

<!--    <router-link to="/student/detail">detail</router-link>-->
    <br/>
    <router-link :to="{
      path:'/student/detail',
      query:{
        name,
        address
      }
    }">detail</router-link>
    <router-view/>


  </div>
</template>

Detail.vue

<template>
  <div>
    <p>学生姓名是:{{$route.query.name}}</p>
    <p>学生地址是:{{$route.query.address}}</p>
  </div>
</template>

5、路由命名

借助name属性

6、路由的props、params参数

1. 配置路由声明参数,在route/index.js中
2. 传递参数
3. 接收参数$route.params

// 创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path: '/school',
            component:School
        },
        {
            path: '/student',
            component:Student,
            children:[
                {
                    path:'detail',
                    component:Detail,
                    // 1.值为对象，该对象中所有key-value都会以props的形式传递给组件
                    // props:{a:1,b:2}
                    // 2.若布尔值为真，就会把该路由组件收到的所有params参数，以props形式传递给组件
                    // props:true
                    // 3.值为函数
                    props($route){
                        return {a:$route.query.name,b:$route.query.address}
                    }
                }
            ]
        }
    ]
})

student.vue

<template>
  <div>
    <p>当前求和为:{{$store.state.a.sum}}</p>
    <p>当前求和放大10倍为:{{bigSum($store.state.a)}}</p>
    <p>学生姓名是:{{$store.state.a.name}}</p>
<!--    强制转换为Number-->
    <select v-model.number="n">
<!--      得到的是字符串-->
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="INCREMENT(n)">+</button>
    <button @click="DECREMENT(n)">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>

<!--    <router-link to="/student/detail">detail</router-link>-->
    <br/>
    <router-link :to="{
      path:'/student/detail',
      query:{
        name,
        address,
      }
    }">detail</router-link>
    <router-view/>


  </div>
</template>

detail.vue

<template>
  <div>
    <p>学生姓名是:{{$route.query.name}}</p>
    <p>学生地址是:{{$route.query.address}}</p>
    <p>{{a}}</p>
    <p>{{b}}</p>
  </div>
</template>
<script>
// import {mixin} from '../mixin'
import {mapMutations} from 'vuex'
import {mapGetters} from 'vuex'
// import {mapState} from 'vuex'
export default {
  name:'Student',
  props:['a','b'],
  data(){
    console.log(this)
    return{
      // sum: 0, //当前和
      n: 1, //用户选择数字
    }
  },
  methods:{
    // increment(){
    //   this.$store.dispatch('increment',this.n)
    // },
    // eslint-disable-next-line vue/no-dupe-keys

    // decrement(){
    //   this.$store.commit('DECREMENT',this.n)
    // },
    incrementOdd(){
      // eslint-disable-next-line no-empty
      if(this.sum % 2){

      }
    },
    incrementWait(){
      setTimeout(()=>{
      },500)
    },
    // 生成对应的方法,方法中调用commit联系mutations
    // ...mapMutations({'increment':'INCREMENT',decrement:'DECREMENT'})
    ...mapMutations('a',['INCREMENT','DECREMENT']),
    ...mapGetters('a',['bigSum']),
    // ...mapState({sum:'sum'})

  }
  // mixins:[mixin]
}
</script>

7、编程式路由导航

不借助router-link实现路由跳转，使路由跳转更灵活

router的replace属性：是否保存历史记录

router的push

前进bacword后退forward

go:后退几步

8、缓存路由组件

那个不展示的路由组件保持挂载，不被销毁

keep-alive

9、activated和deactivated生命周期钩子

激活和失活：捕获路由组件的激活状态

定时器

10、路由守卫

对路由进行权限控制

10.1、全局守卫

// 全局前置路由守卫-----每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
    console.log('@@@',to,from,next)
    // if(localStorage.getItem(''))
})
export default router

后置路由守卫

10.2、独享守卫

routes:[
    {
        path: '/school',
        component:School,
        // 权限校验
        meta:{isAuth:true},
        beforeEnter:(to,from,next)=>{
            console.log(to,from,next)
        }
    },

10.3、组件内守卫

export default {
  name:'Student',
  props:['a','b'],
  data(){
    console.log(this)
    return{
      // sum: 0, //当前和
      n: 1, //用户选择数字
    }
  },
  // 进入守卫，通过路由规则，进入该组件时被调用
  beforeRouteEnter(){
    
  },
  // 离开守卫，通过路由规则，离开该组件时被调用
  beforeRouteLeave(){
    
  }
  // mixins:[mixin]
}

11、history和hash模式

路径是否有#,兼容性

10.3、组件内守卫

export default {
  name:'Student',
  props:['a','b'],
  data(){
    console.log(this)
    return{
      // sum: 0, //当前和
      n: 1, //用户选择数字
    }
  },
  // 进入守卫，通过路由规则，进入该组件时被调用
  beforeRouteEnter(){
    
  },
  // 离开守卫，通过路由规则，离开该组件时被调用
  beforeRouteLeave(){
    
  }
  // mixins:[mixin]
}

11、history和hash模式

路径是否有#,兼容性

new Router()中添加mode