vue-router，vue路由简介-蒲公英云

vue-router，vue路由简介

女爷i 2022-11-04 01:57 268阅读 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(...)

声明式	编程式
`<router-link :to=”…”>`	`router.push(…)`

// 字符串,这里应该是一个地址字符串
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
        }
      ]
    }
  ]
});

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

（五）重定向和别名

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,
},

（六）路由传参

（七）导航守卫

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");
    }
  }
});