路由Router

文章目录?

• 前言
• 一、路由
• 二、vue-router
• 三、相关面试题

---

前言

这张是关于路由的基础知识，先从vue-router开始，后期会补充reactRouter。

---

一、路由

1.后端路由

url请求地址与服务器资源之间的对应关系。

• 后端渲染（存在性能问题）
• Ajax前端渲染（提高性能，不支持浏览器的前进和后退操作）
• SPA（single page application） :单页渲染，整个网站只有一个页面，内容通过Ajax局部实现，支持浏览器的前进和后退操作。

2.前端路由

根据不同用户事件，显示不同的页面内容。

二、vue-router

1.关于路由

• 官网：Vue Router | Vue.js 的官方路由 (vuejs.org)
• 安装：npm install vue-router --save
• 点击页面跳转，页面刚好显示对应内容。

2.路由中的三胞胎

• route：指一条路由
• routes：一组路由，把route中每一个路由组合起来，形成数组。
• router：相当于管理路由的机制。routes定义一组路由，请求动态需要router。

3.路由的实现及功能

3.1 实现：把路径和页面内容对应起来，然后在页面中渲染出来。

• <router-link>：点击
• <router-view>：显示

3.2 步骤：

• 引入相关库
• 添加路由链接（router-link）
• 定义路由（由两部分组成 path 和 component ）

  const routes = [
        {
          path: '/login',
          name: 'login',
          component: () => import('../views/Login.vue')
        }
  ]

• 配置并创建路由实例

  const router = new VueRouter({
      routes //=》routes：routes
  })

• 把路由挂载到Vue根实例

  const app = new Vue({
      router
  }).$mount($#app)

3.3 功能：

• 两种模式hash、history

  const router = createRouter({
      //hash
      history:createHashHistory();
  
      //history
      history:createHistory();
      routes
  })

• 嵌套路由:父级路由中有子级路由链接
• 路由参数：路径参数用冒号?:?表示
• 命名路由：name

  const routes = [
    {
      path: '/user/:username',
      name: 'user',
      component: User,
    },
  ]

4.动态路由

路由组件通过?$route.params 获取路由参数，动态参数以 : 开头，props 接收路由参数

const User = {
  // 请确保添加一个与路由参数完全相同的 prop 名
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const routes = [{ path: '/user/:id', component: User, props: true }]

5.页面导航两种方式

• 声明式导航：通过点击链接实现

• 编程式导航：调用JavaScript形式的 API 实现

6.路由组件传参

• name 传参
• vuex 状态管理（$store.state）
• <router-link>标签中的 to 传参

path：要跳转的路由路径，或路由文件中配置的 name 值

params：要传送的参数，可以以 key:value 形式传递

query：通过 url 来传参

• $router 方式跳转

7.路由重定向

用于不同页面跳转到同一个页面情况。使用 redirect 参数，将要跳转页面路径添加到 redirect 参数后面。

8.路由守卫

在进入路由之前，拦截检查，是否放行。

vue-router 中提供三类钩子函数实现路由守卫

1. 全局导航
2. 路由独享
3. 组件守卫