一、yarn add vue router 第一步，安装命令咋用？

terry 6个月前 (07-10) 阅读数 160 #Vue

文章标签 yarn；vue router

不少刚接触Vue项目的同学,想给项目加路由功能时，会疑惑“yarn add vue router 怎么用？”，其实这事儿得从安装、配置到实际开发一步步拆解，毕竟Vue Router是Vue生态里管理页面跳转、实现单页应用的核心工具，把它用顺了，项目里的页面导航、权限控制这些需求才能轻松落地，下面就从安装到实战，把每个环节讲明白～

先得搞清楚，`yarn add vue-router` 是用yarn包管理器给Vue项目装路由依赖，但这里有个关键：**Vue版本和Vue Router版本得对应**！要是你项目用的Vue2（package.json里vue版本是2.x），得装`vue-router@3`；要是Vue3（vue版本3.x），得装`vue-router@4`，直接输错版本，项目准报错。

具体操作时,先打开终端，进到项目根目录（就是有package.json的那个文件夹），然后根据Vue版本选命令：

Vue2项目：yarn add vue-router@3
Vue3项目：yarn add vue-router@4

装完后,去package.json里瞅瞅，dependencies 里有没有vue-router，版本对不对，这一步要是版本错了，后面配置准出问题——比如Vue2硬装了Vue Router4，启动项目时会疯狂报“语法错误”“API不存在”这类错，因为两个版本的核心API变了（比如Vue Router4用createRouter创建实例，Vue Router3是new VueRouter）。

安装后咋配置Vue Router？

装完只是第一步,得把Vue Router接到项目里，还得分Vue2和Vue3两种情况讲，因为配置逻辑不一样。

（1）Vue2项目配置

先在src文件夹下新建个router文件夹，里面建index.js文件，代码大概长这样：

// 引入Vue和VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入要跳转的组件（比如首页、关于页）
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
// 全局注册VueRouter插件
Vue.use(VueRouter)
// 创建路由实例
const router = new VueRouter({
  // 路由模式：hash（带#）或history（无#，但需要后端配置）
  mode: 'hash', 
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})
export default router

然后去main.js里把router挂到Vue实例上：

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入上面写的路由配置
new Vue({
  router, // 把路由实例注入Vue根实例
  render: h => h(App)
}).$mount('#app')

在App.vue里加路由出口和导航：

<template>
  <div id="app">
    <!-- 导航链接，to对应path -->
    <router-link to="/">首页</router-link>
    <router-link to="/about">lt;/router-link>
    <!-- 路由组件渲染的地方 -->
    <router-view></router-view>
  </div>
</template>

（2）Vue3项目配置

Vue3里Vue Router的API变了，得用createRouter、createWebHistory（或createWebHashHistory）这些新方法，同样在src/router/index.js里写：

import { createRouter, createWebHistory } from 'vue-router'
// 引入组件
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
const router = createRouter({
  // history模式：用createWebHistory，部署时要后端配合；hash模式用createWebHashHistory
  history: createWebHistory(), 
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})
export default router

然后去main.js里注册（Vue3是用app.use）：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router) // 把路由挂载到App实例
app.mount('#app')

App.vue里的路由出口和导航写法和Vue2差不多，还是<router-link>和<router-view>～

常用功能咋实现？

装完配好后,得用路由解决实际需求，比如页面跳转、嵌套路由、动态传参这些。

（1）路由跳转咋做？

有两种方式：声明式和编程式。

声明式用<router-link>，比如导航栏里写：
```
<router-link to="/about">去关于页</router-link>
```
还能传参数,比如动态路由里的to="/user/123"（对应path: '/user/:id'）。

编程式用this.$router.push()（Vue2）或useRouter()（Vue3组合式API），Vue2里在方法里写：

methods: {
  goAbout() {
    this.$router.push('/about')
  }
}

Vue3组合式API得先引入useRouter：

import { useRouter } from 'vue-router'
export default {
  setup() {
    const router = useRouter()
    const goAbout = () => {
      router.push('/about')
    }
    return { goAbout }
  }
}

（2）嵌套路由咋配置？

用户页”下面还有“用户详情”“用户订单”，就得用children配置，以Vue3为例，在router/index.js里加：

import User from '@/views/User.vue'
import UserDetail from '@/views/UserDetail.vue'
import UserOrder from '@/views/UserOrder.vue'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/user',
      name: 'User',
      component: User,
      // 嵌套路由写在children里
      children: [
        {
          path: 'detail', // 注意！这里path不加/，实际路径是/user/detail
          name: 'UserDetail',
          component: UserDetail
        },
        {
          path: 'order',
          name: 'UserOrder',
          component: UserOrder
        }
      ]
    }
  ]
})

然后在User.vue里得加<router-view>，用来渲染子路由组件：

<template>
  <div>
    <h1>用户中心</h1>
    <router-link to="detail">用户详情</router-link>
    <router-link to="order">用户订单</router-link>
    <router-view></router-view>
  </div>
</template>

（3）动态路由咋玩？

比如用户ID不同,页面内容不同，得用path: '/user/:id'这种形式，配置路由时：

{
  path: '/user/:id',
  name: 'UserInfo',
  component: UserInfo
}

然后在组件里取参数,Vue2用this.$route.params.id，Vue3组合式API用useRoute()：

// Vue3示例
import { useRoute } from 'vue-router'
export default {
  setup() {
    const route = useRoute()
    console.log(route.params.id) // 就能拿到动态参数id
  }
}

（4）路由守卫咋用？

比如进入页面之前判断用户是否登录,这时候用导航守卫，全局守卫在router/index.js里写：

// Vue3示例，全局前置守卫
router.beforeEach((to, from, next) => {
  // to是要去的路由，from是来自的路由，next是放行函数
  if (to.path === '/profile' && !isLogin()) { // 假设isLogin()判断是否登录
    next('/login') // 没登录就跳登录页
  } else {
    next() // 放行
  }
})

组件内守卫（比如进入UserInfo前做操作），Vue2里在组件里写：

export default {
  beforeRouteEnter(to, from, next) {
    // 进入组件前执行，这时候this还没创建，不能用this
    next(vm => {
      // vm是组件实例，这里可以操作vm的数据
    })
  }
}

安装配置时容易踩的坑？

很多同学装完配置完,页面不渲染、跳转报错，大概率是掉坑里了，常见问题得避坑：

（1）版本不兼容

前面说过,Vue2和Vue Router3配对，Vue3和Vue Router4配对，要是Vue2项目装了vue-router@4，启动时会报错“export 'createRouter' was not found in 'vue-router'”，因为Vue Router4的API是给Vue3设计的，解决方法：卸载错的版本，重新装对应版本（yarn remove vue-router 再 yarn add vue-router@3）。

（2）路由模式配置错

Vue Router有hash和history模式。history模式好看（网址没），但部署到服务器时，刷新页面会404，因为服务器没配置 fallback ，要是部署到静态托管平台（比如GitHub Pages），得用hash模式；要是自己有后端，得让后端把所有路由请求转发到index.html，所以新手建议先玩hash模式，避免部署踩坑。

（3）没写或路径错

路由组件要渲染,必须在父组件里写<router-view>，比如嵌套路由时，忘记在父组件（如User.vue）里加<router-view>，子路由组件就没地方渲染，页面一片空白，路由配置里的path别写错，比如children里的path加了，变成绝对路径，导致匹配不上。

（4）组件导入路径错

比如在router/index.js里导入组件时，路径写成@/views/home.vue（小写），但实际组件文件是Home.vue（大写），在Windows系统可能没事，到Linux/Mac就会因为大小写敏感报错，所以路径和文件名要严格一致。

把这些步骤和坑搞明白,“yarn add vue router 怎么用”就彻底理顺了～总结下：先选对版本装依赖，再根据Vue版本配路由实例，接着用和做导航和渲染，最后结合业务需求玩跳转、嵌套、动态路由这些功能，路由是单页应用的“骨架”，把它搭好，页面之间的跳转、权限控制这些核心需求才能稳稳落地，现在可以打开项目，照着步骤试一遍，遇到问题再回头看坑点，练几次就熟啦～