vue——vue-router(路由)

路由就是通过互联网的网络把信息从源地址传输到目的地址的活动

生活中的路由器是做什么的？

• 它提供了两种机制：路由和转送
  • 路由是决定数据包从来源到目的地的路径
  • 转送将输入端的数据转移到合适的输出端
• 路由中有一个路由表，路由表本质上就是一个映射表，决定数据包的指向

---

vue-router 是基于组件和路由的。它的实现原理是SPA(单一页面应用程序)，它在加载页面时，不会加载整个页面，而是更新某个指定的容器中的内容。

---

vue-router的基本使用

• 导入插件 import VueRouter from ‘vue-router’

• 通过Vue.use(插件)安装插件 Vue.use(VueRouter)

• 创建路由对象，配置路由和组件之间的应用关系

• router配置默认路径

  path: '',
  // 重定向
  redirect:'/home' 
  

• 通过代码跳转路由

  this.$router.push('/home')
  或者
  this.$router.replace('/home') //不能返回上一级
  

---

router-link 属性

• tag ：router-link默认渲染成a标签，tag属性让router-link渲染成指定元素
• replace：不会留下history记录，后退键不能返回到上一个页面
• active-class：当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置 active-class 可以修改默认的名称。也可以通过router实例的属性linkActiveClass进行修改

---

动态路由

• 当跳转页面路径不确定时可以使用动态路由

• 配置路径时添加想要传递的参数

  path: '/user/:userId'
  //使用,用v-bind动态绑定
  <router-link :to = "'/user/'+userId">用户</router-link>
  //在跳转目的页面获取
  this.$route.params.userId
  

---

路由的懒加载

• 路由中通常会定义很多不同的页面，然后打包放在一个js文件中，如果有很多页面的话，js文件就会非常大，当我们一次性从服务器请求时，会有点费时。为了避免这种情况，就可以使用路由懒加载。我们可以把不同对应的组件分割成不同的代码块，然后当路由被访问时才加载对应组件，这样就更加高效了。

• // 未使用懒加载
  import Home from '../components/Home'
  
  // 使用懒加载
  const Home = () => import('../components/Home.vue')
  

---

嵌套路由

• //配置 
  {
          path: '/home',
          component: Home,
          meta:{
              title: '首页'
          },
          children: [
              {
                // 路径不加斜杠  
                  path:'news',
                  component: News
              },
              {
                  path: 'message',
                  component: Message
              }
          ]
      }
  //使用时要写完整路径
   <router-link to="/home/news">新闻</router-link>
   <router-link to="/home/message">消息</router-link>
  

---

参数传递

• 方式一：params，动态路由配置路径时添加想要传递的参数(使用方式看上面)

• 方式二：query，配置路由格式：/router；传递方式：对象中使用query的key作为传递方式；传递后形成的路径：/router?userId=123

  this.$router.replace({
          path: '/profile',
          query:{
            name: 'ashelly',
            age: 20
          }
  })
  

---

$route 和 $router的区别

• $route: 当前router跳转对象，是一条路由，里面可以获取name,path,query,params等
• $router: VueRouter实例对象，是一个机制，相当于一个管理者，由它来管理路由

---

导航守卫

• 全局守卫

// 前置守卫(guard) => 回调  跳转之前调用,可以用于登录验证
router.beforeEach((to, from, next) => {
    // 从from 跳到 to
    document.title = to.matched[0].meta.title
    next()
})

// 后置钩子(hook) => 回调 跳转之后调用
router.afterEach((to, from) => {})

• 路由独享守卫
  • 配置路由时添加beforeEnter属性
• 组件内守卫
  • 配置组件时添加beforeRouteEnter属性

---

keep-alive

• keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

• router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存