前端Vue2-Day62

编程式路由导航：不借助router-link实现路由跳转，使路由跳转更灵活。

① 使用$router上的push和replace方法进行跳转：

methods: {
  test1() {
    // push可以使得浏览器记住操作
    this.$router.push({
      name:...,
      path:...,
      params: {
        ...
      }, 
      query: {
        ...
      }
    })
  },
  test2() {
    // replace每一次会代替replace的操作
    this.$router.replace({
      name:...,
      path:...,
      params: {
        ...
      }, 
      query: {
        ...
      }
    })
  }
},     

 

② $router自带的API：forward、back、go（类似于原生js中的history）

1. $router.forward()：前进浏览器历史的下一页

2. $router.back()：后退浏览器历史的上一页

3. $router.go(delta)：加载特定页面，delta为可选参数，正值为向前移动，负值为向后移动，若为0或未传参则相当于location.reload()

 

缓存路由组件：keep-alive标签（让不展示的路由组件保持挂载，不被销毁）

使用：在展示的router-view外侧包裹标签，并使用include属性配置组件名称(组件内配置的name属性值)，不配置则默认所有组件。

<keep-alive include="组件名">
    <router-view></router-view>
</keep-alive>

 若想同时缓存多个组件，则将include属性绑定，组件名以数组形式编写。

<keep-alive :include="['part1','part2']">
    <router-view></router-view>
</keep-alive>

 

缓存路由组件独有的生命周期钩子：activated和deactivated（用于捕获路由激活状态）

① activated：路由组件被激活时调用

② deactivated：路由组件失活时调用

 

路由元信息：meta（用于配置路由的信息）

 

路由守卫：对路由进行权限控制（对路由器router进行配置）

分类：全局守卫、独享守卫、组件内守卫。

① 全局前置守卫 beforeEach：在路由初始化或每次路由切换前调用，参数（to:跳转至的路由信息、from:来自的路由信息、next：跳转函数）

② 全局后置守卫 afterEach：在路由初始化或每次路由切换后调用，参数（to:跳转至的路由信息、from:来自的路由信息）

const router = new VueRouter({
    routes: [{
        name: 'demo',
        path: '/demo',
        // meta路由元信息，用于配置路由的属性
        meta: { isAuth: true }
    }]
})
// beforeEach参数:to跳转信息、from来自信息、next跳转函数
router.beforeEach((to, from, next) => {
    if (to.isAuth) {
        ....
    } else {
        // next允许跳转即放行
        next()
    }
})
// afterEach参数：to跳转信息、from来自信息
router.afterEach((to, from) => {
    ...
})
export default router

 

③ 独享路由守卫 beforeEnter： 参数与全局前置一样，内部逻辑结构也一样

//独享路由守卫只有前置！
beforeEnter: (to, from, next) => {
 //逻辑与全局路由守卫类似
},

 

④ 组件内路由进入守卫 beforeRouteEnter：

⑤ 组件内路由离开守卫 beforeRouteLeave：

组件内守卫需要通过路由规则进入或离开才能触发！

export default {
  name: "About",
  // 通过路由规则进入该组件时调用 to属性固定
  beforeRouteEnter(to, from, next) {
    // ...
  },
  // 通过路由规则离开该组件时调用 from属性固定
  beforeRouteLeave(to, from, next) {
    // ...
  },
};

 

路由守卫执行顺序：

 

 

 

重定向：当用户访问一个路由会跳转至配置的重定向路由

① 普通重定向：

② 命名路由重定向：

③ 动态重定向：

别名：

 

路由工作的history模式和hash模式：

① hash模式：url#及后面的内容即为hash值

1. hash模式地址中永远有#号，不美观。

2. 若以后地址通过第三方手机app分享，若app校验严格，则地址会被标记为非法。

3. 兼容性好。

② history模式：

1. 地址干净美观。

2. 兼容性与hash模式相比略差。

3. 应用部署上线后需要后端人员支持，解决刷新页面服务端404的问题。nodejs可通过引入connect-history-api-fallback中间件解决刷新404问题！

 

npm run build命令，将vue项目打包生成为传统html+css+js项目，生成dist文件夹。

 

Vue UI组件库：

① 移动端：Vant、Cube UI、Mint UI、nutui(京东)

② PC端：Element UI、Mint UI