vue的路由基础学习笔记

vue的路由

1.路由的使用

1. npm install vue-router安装路由，vue2版本安装vue-router3,vue3版本安装vue-router4

2. 在main.js中引入和路由

   import Vue from 'vue'
   import App from './App.vue'
   import VueRouter from 'vue-router'
   import router from './router/index'
   Vue.config.productionTip = false
   Vue.use(VueRouter);
   new Vue({
     router,
     render: h => h(App),
   }).$mount('#app')
   
   

3. 在scr文件夹中创建一个router文件夹，在router文件夹中创建一个index.js

   import VueRouter from 'vue-router'
   import home from '../pages/Home.vue' //引入组件
   import about from '../pages/About.vue'//引入组件
   export default new VueRouter({  //配置路由导出
     routes: [
       {
         path: '/home',
         component: home
       },
       {
         path: '/about',
         component: about
       }
     ]
   })
   

4. 在组件中的切换是

   <router-link to="/about" class="list-group-item" active-class="active">about</router-link>
   <router-link to="/home" class="list-group-item" active-class="active" >home</router-link>
   //active-class是选择的样式
   

5. 路由组件的展示

   <router-view></router-view>

2. 路由使用的几个注意点

1. 路由组件通常是在pages文件夹中。一般组件通常是在components组件中。
2. 通过切换是‘隐藏’了路由组件，默认是销毁了的，需要是的时候在去挂载。
3. 每个组件都有自已的$route,里面存储这自已的路由信息
4. 整个应用只有一个router。可以通过组件的$router属性获取。

3.嵌套路由的配置

 {
      path: '/home',
      component: Home,
      children: [  //使用children配置子路由
        {
          path: "msg", //子路由的不用加 “/”  要写成"/msg"
          component: Message
        },
        {
          path: "news",
          component: News
        }
      ]
    },

嵌套路由的跳转 <router-link to="/home/news" active-class="active">新闻</router-link> to 的路由要携带父路由 “/home/news”

4.路由传参

1. 路由的query传参

   1. 传递参数

      //字符串形式
        <router-link class="list-group-item":to="`/home/msg/detail?id=${item.id}&title=${item.title}`" v-for="item in mesList" :key="item.id"> {{ item.title }} </router-link>
      
      //对象的形式传参
       <router-link class="list-group-item" v-for="item in mesList" :key="item.id":to="{ path: '/home/msg/detail', query: { id: item.id, title: item.title }}">{{ item.title }}</router-link>
      

   2. 接受参数

      <h3>消息的内容是：{{ $route.query.title }}</h3>
      <h3>消息的编号是:{{ $route.query.id }}</h3>
      

   3. 命名路由,用户简化路由跳转的路由长度

       routes: [
          {
            path: '/home',
            component: Home,
            children: [
              {
                path: "msg",
                component: Message,
                children: [
                  {
                    name: "detail", //路由命名
                    path: 'detail',
                    component: Detail
                  }
                ]
              },
              {
                path: "news",
                component: News
              }
            ]
          },
          
        //路由跳转是就可以简化
          <router-link class="list-group-item" v-for="item in mesList"  :key="item.id" :to="{ name: 'xiangqing', query: { id: item.id, title: item.title }}">{{ item.title }}</router-link>
      

2. 使用params传递参数

   1. 首先要在理由的配置中什么参数的配置

      children: [
                  {
                    name: "xiangqing",
                    path: 'detail/:id/:title',//申明params的参数
                    component: Detail
                  }
                ]
      

   2. 在组件中传递参数时使用的方式

       //第一中方式 
      <router-link class="list-group-item"v-for="item in mesList":key="item.id" :to="{ name: 'xiangqing', params: { id: item.id, title: item.title }}">{{ item.title }}</router-link >
      
      //第二种方式
      <router-link class="list-group-item" :to="`/home/msg/detail/${item.id}/${item.title}`" v-for="item in mesList" :key="item.id" >{{ item.title }} </router-link>
      

      在使用params传递参数时，用 :to的对象形式路由不可以用path，要用name:的形式

      5.路由的props的配置形式

   3. 路由的props的值为对象

      children: [
          {
              name: "xiangqing",
              path: 'detail/:id/:title',
              component: Detail,
              props: {
                  id: '001',
                  title:"hello"
              }
          }
      ]
      //detail组件以props形式接受
       props: ["id", "title"],
      
      

   4. 路由的props的值为true

       children: [
           {
               name: "xiangqing",
               path: 'detail/:id/:title',
               component: Detail,
               props: true
           }
       ]
      //detail组件可以接受到路由中params的参数
       props: ["id", "title"],   
       //只能接受params形式的参数
      

   5. 路由的props的函数形式

      children: [
          {
              name: "xiangqing",
              path: 'detail',
              component: Detail,
              props(route) {  //可以接受query的参数
                  return {
                      id: route.query.id,
                      title: route.query.title
                  }
              }
          }
      ]
      
      //detail组件同样是
       props: ["id", "title"],   
      

   5.编程是路由导航

   1. 作用就是不借助<router-link>进入路由跳转。可以用于事件跳转

   2. 编码：

       pushShow(item) {
            this.$router.push({
              name: "xiangqing", //在router.js中配置的name属性
              query: {
                id: item.id,
                title: item.title,
              },
            });
          },
          replaceShow(item) {
            this.$router.replace({
              name: "xiangqing", //在router.js中配置的name属性
              query: {
                id: item.id,
                title: item.title,
              },
            });
          },
      

   3. 防window中的前进和后台或调到第几页

       back() {
           this.$router.back();
       },
       forward() {
          this.$router.forward();
       },
       go(){
         this.$router.go(2)
       }
      

   6. 缓存路由组件 <keep-alive ></keep-alive>

   1. 缓存不被展示的路由组件，让其不被销毁

   2. 具体编码：

       <keep-alive include="News">  //include = "News" 是要被缓存的路由组件名，没有包含的路由组件就不被缓存
            <router-view> </router-view>
          </keep-alive>
      

   7.两个新的生命钩子activated和deactivated

   1. 这个两钩子用于路由组件在<keep-alive>时激活状态和失活状态
   2. activated用于路由组件的激活状态触发
   3. deactivated在路由组件失活状态触发

   8. 路由的守卫

   1. 作用，对路由进行权限控制

   2. 分类：全局守卫，独享守卫，组件内守卫

   3. 全局守卫：beforeEach和afterEach

       //每次路由切换前调用
      router.beforeEach((to, from, next) => {
        let school = localStorage.getItem("school")
        if (to.meta.isAuth) {
          if (school === 'shanghai') {
            next()
          } else {
            next({ path: '/about' })
          }
        } else {
      
          next()
        }
      
      })
      
      //每次路由切换后调用
      router.afterEach((to) => {
        if (to.meta.title) {
          document.title = to.meta.title;//修改页面的title
        } else {
          document.title = "CBD家居"   //修改页面的title
        }
      })
      
      

   4. 独享路由守卫

      {
          path: "news",
              component: News,
                  meta: {
                      isAuth: true,
                          title: '新闻'
                  },
                      beforeEnter(to, from, next) {  //某一个路由独享
                          let school = localStorage.getItem("school")
                          if (to.meta.isAuth) {
                              if (school === 'shanghai') {
                                  next()
                              } else {
                                  next({ path: '/about' })
                              }
                          } else {
      
                              next()
                          }
                      }
      }
      

   5. 组件内的守卫就是进入守卫和离开守卫beforeRouteEnter和beforeRouteLeave

      export default {
        name: "About",
        data() {
          return {};
        },
        beforeRouteEnter(to, from, next) {
          let school = localStorage.getItem("school");
          if (to.meta.isAuth) {
            if (school === "shanghai") {
              next();
            } else {
              alert("学校名不对");
            }
          } else {
            next();
          }
        },
      };
      

   6. 不用的路由模式

      1. Hash 模式路由有一个哈希符#

      2. HTML5 模式。这种路由需要在路由里配置一个属性

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