vue router(路由)

概念

1. 是什么 : 路径和组件的映射关系
2. 为什么要使用路由 : 为了实现SPA
   1. Single Page Application
   2. 所有业务都在一个html页面中实现
   3. 优点:
      1. 页面不刷新,用户体验更好
      2. 数据传递比较方便
   4. 缺点:
      1. 首次刷新较慢
      2. 不利于SEO

使用

1. 下包
   1. yarn add vue-router@版本号
   2. Vue2需要依赖低版本路由包
2. 引入到main.js文件 import VueRouter from ‘vue-router’
3. 安装路由插件
   1. Vue.use(VueRouter)
   2. 自动注册两个全局标签
      1. router-view
      2. router-link
   3. 创建路由规则数组 const routes = [ {path : ‘路径’ , component:组件对象} ]
      1. 数组里面是对象,一个对象代表一条路由规则
      2. 组件对象需要提前导入
   4. 根据路由规则数组创建路由对象 const router = new VueRouter({routes})
   5. 将路由对象挂载到Vue实例上 new Vue({ router }).$mount(‘#app’)
   6. 使用router-view设置挂载点
      

声明是导航

1. router-link
2. 优点
   1. 自动判断是否要加#
   2. 自动添加类名,方便实现导航高亮
3. 用法 <router-link to=“路径”></router-link>
4. 传参
   1. query 查询字符串
      1. 传递 <router-link to=“路径?参数名=参数值&…”></router-link>
      2. 接收 $route.query.参数名
   2. params 动态路由传参
      1. 前提 : 在路由配置规则中,给path:‘/路径/:参数名’
      2. 传递 : <router-link to=“路径/参数值”></router-link>
      3. 接收 : $router.params.参数名

重定向

{
   path:'/',
    redirect:'指定要跳转的路径'
}

404页面

{
    path:'*',
    component:404组件对象
}

路由模式

// 在创建路由对象时配置
// hash模式  有#
// history 模式  没有#,但需要后台配置
new VueRouter({
    // 默认为hash
    mode:'history'
})

编程式导航

1. 作用 :使用js代码进行页面切换
2. 用法
   1. 如果使用name进行跳转,需要提前给路由规则配置name:‘路由名’
   2. this.$router.push({path:'路径’或者name:‘路由名’})
3. 传参

   this.$router.push({
       path:'路径'
       name:'路由名'
       query:{}
    	params:{}
   })
   

   1. 注意事项 : 如果使用puth跳转,会忽略params
   2. 所以推荐组合 path + query,name + params

路由嵌套

1. 创建子路由对应组件
2. 配置路由规则

   	{
       children:[
           	// 配置规则同一级路由
          		{}
       	]
   	}
   

   1. 注意事项 : path一般开头不加/
3. 在一级路由的组件中添加 router-view 占位
4. router-link-active : 模糊匹配
5. router-link-exact-active : 精准匹配

路由前置守卫

1. 作用
   1. 权限控制,页面拦截
   2. 一般用于未登录状态拦截
2. 用法

   router.beforeEach((to,from,next)=>{
       // to 到哪里去
       // from 从哪里来
       // next 是否放行 ; next()放行;next(false)拦截;next(路径)跳转到指定路径
       next()
   })
   

   1. 必须要点用next(),否则路由系统会瘫痪

组件缓存

1. 作用 : 减少频繁销毁创建组件导致的性能浪费
2. 用法 : 在router-view外面包裹一层keep-alive
3. 匹配缓存
   1. include=“组件的name值” 自包含
   2. exinclude=“组件的name值” 自排除