Vue 路由

基本概念和基本使用

Vue中路由是 一种映射关系，确切来说 是 路径和组件的映射关系。

为何使用： SPA(Single Page Application 单页面应用程序)

• 优点 只有一个HTML页面，不用刷新页面，用户体验更好，更高效。
• 缺点 学习成本高，首屏加载慢，不利于SEO

如何使用

1 装包 yarn add vue-router

2 引入 import VueRouter from 'vue-router'

3 注册 Vue.use(VueRouter)

4 配置路由规则

let routes = [
  // 一个对象就是一条规则
  { 
  path:''//路径,
  component: , //引入的组件
  name:'',//路由名称 ，用于编程式导航跳转
  } 
]

5 创建路由对象，传入配置规则

let router = new VueRouter({
  routes 
})

6 将路由对象挂到Vue配置中

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

7. 使用 router-view 组件占位, 将来路径匹配后会将指定的组件替换到此处

---

声明式导航

在组件中 对应位置 使用 <router-link>

• <router-link> 最终会被渲染成a标签
• 自动添加#
• 自动添加高亮类名 1：router-link-active 模糊匹配 url 后面的 hash 2 ：router-link-exact-active 精确匹配 url 后面的 hash
• 用法<router-link to="路径"></router-link>
• 传参 1 query：在 url 后面使用 ? 传参 2 params :需要提前在路由配置中设置 /:属性名

---

路由规则配置

• 重定向 ：配置属性中加入 redirect ：‘路径’
• 默认路由 ：配置对象的 path设置为 ‘*’
• 模式 ： 在创建router对象是 传入mode ，1 默认是hash url后面有# 。2 history 去掉# 更美观，不过需要后端配合

---

编程式导航

• 可以在js中 进行路由跳转
• 用法：

$router.push({
  path: '路径',
  name: '路由名称'
})
注意事项 目前新版本 双击会出现报错 在后面加上回调 
.catch((e) => {}) 即可

• 传参：

$router.push({
  path: '路径',
  name: '路由名称',
  query: {},
  params: {}
})
注意事项: 如果使用 path 则会忽略 params
推荐使用 name + params 或 query 使用

路由嵌套和守卫

• 子路由配置规则中 加 children:[ ] ,数组中配置和routes一样，注意事项: 子路由的 path 不能以 / 开头。
• 全局前置导航守卫 ： 用于拦截路由跳转 用法

1 在 main.js 中找到 router 对象调用 beforeEach 方法

router.beforeEach((to, from, next) => {
    to到哪去， from 从哪来 ， next 是否放行函数  （next(false)就是不放行）
})
注意事项: next 必须调用, 否则路由系统就瘫痪了

---

组件缓存

• 缓存的组件不会被销毁
• 用法：

在 router-view 外面包裹一个 keep-alive 组件即可(include包含，exclude排除)

当使用了 keep-alive 之后, 组件会多两个钩子函数:activated(激活时触发),deactivated(失活时触发)