Vue路由总结

路由介绍

什么是路由
一个路由就是一组映射关系 key-value key为路径 value可能是function或者component
点击跳转的时候实现局部刷新
搭建路由
npm i vue-router@3
我这里用的是vue2所以下载的路由时下载的是3

main.js
import VueRouter from “vue-router”; 引入路由文件
import router from “./router/index”; 引入路由器

//引入Vue
import Vue from "vue";
//引入App
import App from './App';
//引入vuerouter
import VueRouter from "vue-router";
//关闭Vue的生产提示
Vue.config.productionTip = false;
//引入路由器
import router from "./router/index";
//应用插件
Vue.use(VueRouter)
new Vue({
    el:'#app',
    render: h => h(App),
    router:router
});

index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from '../components/About'
import Home from "../components/Home"
//创建并暴露一个路由器
export default new VueRouter({
    routes:[
    {
        path:"/about",
        component:About

    },{
        path:"/home",
        component:Home
    }
    
    ]
})

在这个文件写路由组件和路径对应关系
使用

<router-link to="/home">
       home

  </router-link>

组件的嵌套

如何给父组件嵌套子组件
使用组件的children属性
父组件

写组件对应关系

路由的参数

query参数

利用query传递参数 有两种写法
第一种使用路径的写法

/home/message/detail?id=${m.id} 

第二种写法 对象的写法

  <router-link :to="{
                    path:'/home/message/detail',
                    query:{
                        id:m.id,
                        title:m.title

                    }
                }">{{m.title}}</router-link>

接受query参数

{{$route.query.id}}

params参数

第一种 路径的写法

`/home/message/detail/${m.id}/${m.title}`

对象的写法

       <router-link :to="{
                    name:'xijie',
                    params:{
                        id:m.id,
                        title:m.title

                    }
                }">{{m.title}}</router-link>

注意用params传递参数的时候必须要使用路由的名称
接受

{{$route.params.id}}

props参数

用于接受路由传递的参数

{
                   path: 'message',
                   component: Message,
                   children:[
                       {
                           name: 'particulars',
                           path: 'detail',
                           component: Detail,
                           //第一种写法 props对象 所有的keyvluw的值都会通过props参数给detail组件
                           //props:{a:900}
                           //第二种参数 props布尔值 为true 把接收到的params参数通过props传给detai组件
                        //    props:true
                        //第三种写法 为函数 通过props给detail组件
                        props($route){
                            return {
                                id:$route.query.id,
                                title:$route.query.title
                            }
                        }
                       }
                   ],
               }

接受

<template>
   <ul>
     <li>消息编号:{{ id }}</li>
     <li>消息标题:{{title }}</li>
   </ul>
</template>

<script>
export default {
  name: "DetailVue",
  mounted() {
    console.log(this.$route);
  },
  props:['id','title']
}
</script>

路由式编程跳转

不借助实现路由跳转,让路由跳转更加灵活

<ul>
      <li v-for="m in messageList" :key="m.id">
        <button @click="pushShow(m)">
          push查看
        </button>
        <button  @click="replaceShow(m)">
          replace查看
        </button>
      </li>
    </ul>

调用 this.$router的方法进行路由跳转

methods:{
    replaceShow(m){
      this.$router.push({
        name:"xijie",
        query:{
          id:m.id,
          title:m.title
        }
      })
    },
    pushShow(m){
      this.$router.replace({
        name:"xijie",
        query:{
          id:m.id,
          title:m.title
        }
      })
    }

路由守卫

对权限进行校验
全局路由守卫
前置路由守卫
beforeEach在跳转前进行判断 它接收三个参数：to、from和next。如果目标路径是登录页面，则直接调用next()方法进行路由跳转

router.beforeEach((to,from,next)=>{
    console.log(from);
    if(to.path==='/home/news'||to.path=='/home/message' || from.path=='/home'){
        if(localStorage.getItem('school'=='at')){
            next();
        }
        else{
            alert('错误')
        }
    }
    else{
        next();
    }
})
export default router;

全局后置
切换后执行

独享路由守卫
用来对单个路由进行权限限制 没有后置 只有进入前

routes:[
       {
           name: 'regard',
           path:'/about',
           component: About,
           meta:{
            isAuth:false
           },
           beforeEnter:(to,from,next)=>{
            console.log(from);
            if(to.meta.isAuth){
                if(localStorage.getItem('school'=='at')){
                    next();
                }
                else{
                    alert('错误')
                }
            }
            else{
                next();
            }
           }
       }
  ]

组件单个路由守卫
beforeRouteEnter 通过路由规则进入时触发
beforeRouteLeave 通过路由规则离开时触发

beforeRouteEnter(to,from,next){
    //to一直是这个组件
    if(to.meta.isAuth){
                if(localStorage.getItem('school'=='at')){
                    next();
                }
                else{
                    alert('错误')
                }
            }
            else{
                next();
     }
  },
  //通过路由规则离开时触发
  beforeRouteLeave(to,from,next){

  }

下周计划
学习vue3 交互项目 看看红宝书