vue-router，vue路由简介

女爷i 2022-11-04 01:57 185阅读 0赞

## （一）命名路由 ##

**命名路由是目前开发当中使用最频繁的形式**

通过一个**名称 name：属性**来标识一个路由显得更方便一些，特别是在**链接一个路由**，或者是执行一些**跳转**的时候，可以直接指定**name**值进行跳转

这就是一个最简单的命名路由

import Vue from "vue";
    import Router from "vue-router";
    import HelloWorld from "@/components/HelloWorld";
    
    Vue.use(Router);
    
    let router = new Router({ 
      routes: [
        { 
          path: "/",
          name: "HelloWorld",
          // 两种方式引入跳转的组件
          component: HelloWorld,
          // component: ()=>import("@/components/HelloWorld"),
        },  
      ]
    });
    export default router

## （二）声明式，编程式导航 ##

**除了使用 `<router-link>`创建 a 标签来定义导航链接，我们还可以借助 `router 的实例方法`，通过编写代码来实现。（通过 $router 访问路由实例）**

当你点击 `<router-link>` 时，这个方法`（this.$router.push）`会在内部调用，所以说，点击 `<router-link :to="...">` 等同于调用 `router.push(...)`

<table> 
 <thead> 
  <tr> 
   <th>声明式</th> 
   <th>编程式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;router-link :to="..."&gt;</code></td> 
   <td><code>router.push(...)</code></td> 
  </tr> 
 </tbody> 
</table>

// 字符串,这里应该是一个地址字符串
    this.$router.push('home')
    
    // 对象，和router中定义的path匹配
    this.$router.push({  path: 'home' })
    
    // 命名的路由，和router中定义的name，和上面的命名路由联动
    this.$router.push({  name: 'user', params: {  userId: '123' }})
    
    // 带查询参数，变成 /register?plan=private
    this.$router.push({  path: 'register', query: {  plan: 'private' }})

**注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：**

同样的规则也适用于 router-link 组件的 to 属性。

const userId = '123'
    router.push({  name: 'user', params: {  userId }}) // -> /user/123
    router.push({  path: `/user/${ userId}` }) // -> /user/123
    // 这里的 params 不生效
    router.push({  path: '/user', params: {  userId }}) // -> /user

## （三）动态路由 ##

## （四）嵌套路由 ##

**实际生活中的应用界面，通常由多层嵌套的组件组合而成。**  
**嵌套路由也是为了解决这一点**

const router = new VueRouter({ 
      routes: [
        { 
          path: "/user/:id",
          component: User,
          children: [
            { 
              // 当 /user/:id/profile 匹配成功，
              // UserProfile 会被渲染在 User 的 <router-view> 中
              path: "profile",
              component: UserProfile
            },
            { 
              // 当 /user/:id/posts 匹配成功
              // UserPosts 会被渲染在 User 的 <router-view> 中
              path: "posts",
              component: UserPosts
            }
          ]
        }
      ]
    });

**最典型的就是这种侧边栏，展开后会有更多选项，每个选项都是，组件，的小路由**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]

## （五）重定向和别名 ##

**1 . 路由的重定向**

通常搭配通配符 **`*`** 一起使用，用于当地址栏所输入的地址和你设置的路由都不匹配时，重定向到指定的页面，如登录页，404页之类的

{ 
      path: "*",
      name: "any",
      // 重定向到登录页
      redirect:'/login',
      component: Login,
    },

**2 . 路由的别名**  
访问`['/routerOne', '/routerTwo', '/routerThree']`中的任何一个都和访问 `/routerAny` 一样

{ 
      path: "/routerAny",
      name: "any",
      // 别名
      // alias: '/routerOne',
      alias: ['/routerOne', '/routerTwo', '/routerThree'],
      component: Login,
    },

## （六）路由传参 ##

## （七）[导航守卫][Link 1] ##

**1 . 全局前置守卫**  
路由导航守卫，是为了路由跳转**之前**做的检查，及操作  
它是跳转**前**触发的，**任何路由跳转都会触发**

路由导航守卫可以让我们对用户要跳转的路由做一次检查，符合条件后放行，不符合条件则强制用户跳转至指定页面。

主要作用为，防止未登录的用户，在地址栏输入地址，跳过登录，进入页面

**to: Route: 即将要进入的目标 路由对象**  
**from: Route: 当前导航正要离开的路由**  
**next: Function: 一定要调用该方法来 resolve 这个钩子。**

router.beforeEach((to, from, next) => { 
      // 想办法获取token，一般都是存储在vuex中
      let isLogin = window.sessionStorage.getItem("token");
      // 存在token就让他登录，跳转到登录页写好的跳转地址
      if (isLogin) { 
      	// 放行，继续执行接下来的路由跳转
        next();
      }
      // 否则就让他跳转到登录页
      else { 
        if (to.path === "/login") { 
          next();
        } else { 
          alert("没有访问权限或登录已过期，请重新登录！");
          next("/login");
        }
      }
    });

**2 . 组件内的守卫**

主要应用场景为，有些页面是不需要登录的，但是当进入到指定页面后，该页面是需要登录后才能看到的

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/9a5c067a201a4c3cbe5727725f5635dd.png
[Link 1]: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html