从0开始配置Vue路由

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 16 天，点击查看活动详情

在 Vue 项目中，路由大多依赖于 vue-router 来实现。搭建项目时，也要进行路由的配置，下面一起从 0 开始配置 vue-router

安装及引入

npm i vue-router

配置 main.js

将路由挂载到全局

import router from '@/router/index.js'

new Vue({
  render: h => h(App),
  router: router
}).$mount('#app')

配置 index.js 文件

1. 建立 router 文件夹，并在文件夹下建立 index.js 文件，引入路由

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   Vue.use(VueRouter)
   

2. 每个路由的 component 都需要对应一个组件，如下就是路由的基本配置形式：

   const routes = [ { path: '/', component: Home } ]
   

3. 创建路由实例并传递 routes 配置

   其中 routes: routes 可以缩写为：routes，value 就是它的 key。也可以在此配置路由模式（hash / history）

   const router = VueRouter.createRouter({
       history: VueRouter.createWebHashHistory(), 
       routes: routes
   })
   

4. 在页面中配置路由路径，并导出。

   完整代码如下：

   

router-link 与 router-view

• router-view 用来渲染视图

router-view 是用来渲染路由映射到的组件，也就是在上面配置的 routes 中的 component 属性传入的数据。

一般我们在根组件 App.vue 文件中放置如下代码，当配置好之后，路径发生变化，渲染对应的组件

• router-link 用来进行导航，跳转到某个路径的页面

它的原理是在触发的时候，将属性 to 的值传到 router.push()，进行跳转

<router-link to="路径"> </router-link>

问题解决

如果在使用 Vue-router 的时候出现如下报错,一般来说是当前安装的 Vue-router 的版本导致的

报错信息如下：

vue2 与 vue3 路由的版本对应：

• vue2：vue-router3
• vue3：vue-router4

npm 下载时如果不声明版本号，默认下载最新版本，所以在 Vue2 项目中引入 vue-router4 出现错误，需要将版本降至3。

先卸载原有版本，再安装版本3，代码如下：

npm uninstall vue-router
npm install --save vue-router@3