有时候我们需要在点击按钮或者逻辑判断完成后才跳转，这时候就不Neng用标签了得用JS。Vue组件实例里提供了`$router`对象。

methods: {
  bindNavgatorNBA {
    // 这里的push就像压栈，点返回Neng回到前一页
    this.$router.push
    // Ru果不想留历史记录，用replace，直接把当前页顶掉
    // this.$router.replace
  }
}

跳转的时候带参数是常有的事。主要有两种方式：

Query传参： 这种方式就是我们熟悉的`?key=value`形式。比如`/login?message=hello`。在目标组件里我们通过`this.$route.query`来获取。

// Login.vue
mounted {
  console.log // 输出 hello
}

动态路由传参： 这种方式geng隐蔽一点。我们需要在路由配置里定义，比如`path: '/detail/:id'`。跳转的时候`/detail/123`。在组件里通过`this.$route.params.id`获取。

现实中的页面结构往往hen复杂，比如在一个页面里上面是导航，左边是侧边栏，右边是内容区。这时候，简单的路由映射就不够用了。

嵌套路由hen好理解，就是路由里套路由。比如`/music`下面有`/music/index`和`/music/song`。配置的时候，我们使用`children`数组。

{
  path: '/music',
  component:  => import,
  children: ,
}

记得，父组件`Music.vue`里也得写个``，不然子组件去哪里渲染呢？

有时候，一个路由可Neng想同时展示多个组件。比如一个页面左边是`Slider`，右边是`Content`。这时候就Ke以用命名视图。

在路由配置里用`components`：

{
  path: '/main',
  components: {
    slider: Slider,
    content: Content
  },
}

在模板里给``加上`name`属性：

路由跳转不仅仅是换个组件那么简单，hen多时候我们还需要权限控制。比如用户没登录，Neng不Neng进后台管理页？用户表单没填完就跳转，要不要提示一下？这时候，导航守卫就派上用场了。它就像是门口的保安，拦住不合规的人。

导航守卫主要分为三类：全局的、路由独享的、组件内的。

这是Zui常用的，直接在`router/index.js`里配置。只要路由发生跳转，它就会触发。

// 全局前置守卫
router.beforeEach => {
  // to: 要进入的目标路由
  // from: 当前导航正要离开的路由
  // next: 必须调用该方法来 resolve 这个钩子
  // 举个例子：判断是否登录
  if  {
    return next // 放行
  }
  let user = localStorage.getItem
  if  {
    next // Yi登录，放行
  } else {
    next // 没登录，踢回登录页
  }
})
// 全局后置钩子
router.afterEach => {
  // 这里没有next，也不会改变导航本身
  // 常用来修改页面title
  document.title = to.meta.title || '默认标题'
})

这个守卫只针对特定的路由，直接在路由配置里写`beforeEnter`。

const routes = 

这个是直接写在组件`.vue`文件里的。比如`beforeRouteEnter`、`beforeRouteUpdate`和`beforeRouteLeave`。

特别值得一提的是`beforeRouteLeave`，这个通常用来预防用户在还未保存修改前突然离开。你Ke以弹个窗问问他：“老铁，你还有东西没保存呢，确定要走吗？”

export default {
  beforeRouteLeave  {
    const answer = window.confirm
    if  {
      next
    } else {
      return false // 取消导航
    }
  }
}

随着项目越来越大，打包后的JS文件体积也会变得惊人。Ru果用户一进来就下载所有页面的代码，那首屏加载速度肯定慢得感人。这时候，路由懒加载就是救星。

我们之前在配置路由时用到了这种写法：

component:  => import

这就是懒加载。它的意思是只有当你真正访问`/home`这个路径时浏览器才会去下载`Home.vue`对应的代码块。这Neng极大地减少首屏压力。

另外还有一个贴心的小功Neng叫滚动行为。你有没有发现，有些网站翻页到下面点击跳转后新页面还在底部？这体验就hen差。我们Ke以在创建路由实例时配置`scrollBehavior`，让每次路由切换时页面dou自动滚回顶部。

const router = createRouter({
  history: createWebHistory,
  routes,
  scrollBehavior {
    // 始终滚动到顶部
    return { top: 0 }
    // Ru果你想像浏览器原生行为那样，记住滚动位置，Ke以 return savedPosition
  }
})

总而言之，Vue-router作为Vue.js生态系统中不可或缺的一环，它不仅仅是一个简单的跳转工具，geng是构建现代单页应用的基石。从基础的路径映射，到复杂的嵌套、权限控制，再到性Neng优化，它dou提供了一套非常完善的解决方案。

虽然刚开始配置的时候可Neng会觉得有些繁琐，什么`meta`信息啊，什么`beforeEach`守卫啊，乱七八糟的代码一大堆。但当你真正理解了它的设计理念，你会发现，这一切dou是为了让我们Nenggeng优雅地管理URL与组件之间的关系。掌握了Vue-router，你也就掌握了打开SPA大门的钥匙。下次在项目中遇到路由问题时别慌，想想这位“指挥家”是怎么工作的，问题往往迎刃而解。