路由的注意事项

1.路由一般放在pages文件夹，组件一般放在components文件夹下

2.通过切换的隐藏的路由是被销毁的，需要的时候再去挂载

3.每个组件都有自己的$route属性，里面存放自己的路由信息

4.整个应用只有一个router,可以通过组件的$router属性获取到

嵌套路由（多级路由）

1.使用children配置项

  {
      path: '/home',
      component: Home,
      //通过children配置子级路由
      children: [
        {
          path: 'news',//此处一定不要写   /news
          component: News
        }
      ]
    }

2.跳转

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

路由的query参数

1.传递参数（有2种写法）

 <!-- 跳转并携带query参数,to的字符串写法 -->
    <router-link :to="`/home/message/detail?id=${传递的数据}&title=${传递的数据}`"></router-link>
    <!-- 跳转并携带query参数,to的对象写法 -->
    <router-link :to="{
      path:'/home/message/detail',
      query:{
        id:'传递的数据',
        title:'传递的数据'
      }
    }">
      跳转
    </router-link>

2.接收参数

this.$route.query.id

路由的params参数

1.配置路由，声明接收params参数

 {
      path: '/home',
      component: Home,
      //通过children配置子级路由
      children: [
        {
          name: 'news',
          path: 'news/:id/:title',//使用占位符声明接收params参数
          component: News,
        }
      ]
    }

2.传递参数

 <!-- 跳转并携带params参数,to的字符串写法 -->
    <router-link :to="`/home/message/detail/${传递的数据}/${传递的数据}`"></router-link>
    
    <!-- 跳转并携带params参数,to的对象写法 -->
    <router-link :to="{
      name:'news',
      params:{
        id:'传递的数据',
        title:'传递的数据'
      }
    }">
      跳转
    </router-link>

特别注意：路由携带的params参数时，若使用to的对象写法，不能使用path配置项，必须使用name配置项

路由props配置

作用：让路由组件更方便的收到参数

 {
      name: 'about',
      path: '/about/:id',
      component: About,
      // props值为对象，该对象中所有的key-value的组合最终都会通过props传给About组件
      props: { id: 9 },

      //props的值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传递给About组件
      props: true,

      //props的值为函数，该函数返回的对象中的每一组key-value都会通过props传给About组件
      props(route) {
        return {
          id: route.query.id
        }
      }

    },

router-link 的replace属性

1.作用：控制路由跳转时操作游览器历史记录的模式

2，游览器的历史记录有两种写入方式：分别是push和replace，push是追加历史记录，replace是替换当前记录(这条记录之前的记录不会被替换)，路由跳转默认push

3.如何开启replace模式：router-link replace> </router-link

编程式路由导航

1.作用：不借助router-link实现路由跳转，让路由跳转更加灵活

this.$router.forward() //前进
this.$router.back() //后退
this.$router.forward() //前进和后退都可以
this.$router.push({}) //添加历史记录
this.$router.replace({}) //替换当前的历史记录  不能回退到替换的那条记录

缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁

<keep-alive include='路由名'>
  <router-view></router-view>
</keep-alive>

两个新的生命周期

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态

activated 路由组件被激活时触发

deactivated 路由组件失活时触发

路由守卫

作用：对路由进行权限控制分类：全局守卫独享守卫组件内守卫

全局守卫

/全局前置守卫，初始化执行，每次路由切换都会执行
router.beforeEach((to, from, next) => {
  //to进入的路由信息  from之前路由的信息  next表示是否放行，让路由继续走下去
})

//全局前后置守卫，初始化执行，每次路由切换都会执行
router.afterEach((to, from) => { 
  //这里可以写一些进入该路由之后需要的逻辑判断
})

独享守卫

   //路由独享守卫  可以再这里写针对进入指定路由需要的逻辑判断,写在指定路由内
      beforeEnter(to, from, next) {

       }

组件内守卫

写在组件内

//进入该路由，通过路由规则，进入该组件时调用
beforRouteEnter(to,from,next){}

//离开该路由，通过路由规则，离开该组件时调用
beforRouteLeave(to,from,next){}

路由的两种工作模式

1.对于一个url来说，什么是hash值？————#及其后面的内容就是hash的值

2.hash值不会包含在htpp请求中，即：hash值不会带给服务器

3.hash模式：

  1.地址中永远带着#号，不美观
  2.若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
  3.兼容性比较好

4.history模式：

  1.地址干净，美观
  2.兼容性和hash模式相比稍差
  3.应用部署上线需要后端人员支持，解决刷新页面服务端404的问题

vue路由