（一）命名路由
命名路由是目前开发当中使用最频繁的形式
通过一个名称 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");
}
}
});
2 . 组件内的守卫
主要应用场景为，有些页面是不需要登录的，但是当进入到指定页面后，该页面是需要登录后才能看到的