vue2中路由的安装

在项目中打开终端运行以下命令即可安装vue2项目中的路由模块

npm i vue-router@3.5.2 -S

基本配置

在安装好路由模块的包之后，我们需要进行一些相应的配置：

在项目中的src/ 路径下创建一个 router 的文件夹

在 src/router/ 路径下创建一个 index.js 文件

对 index.js 文件进行如下的配置

import Vue from 'vue' // 导入vue2构造函数

// 导入 路由构造函数
import VueRouter from 'vue-router'

// 导入相应的组件

// 使用路由 为插件
Vue.use(VueRouter)

// 创建路由对象
const router = VueRouter({
  // 声明路由规则
  router: []
})

// 向外共享路由对象
export default router

接下来我们需要在 main.js 文件下进行相应的配置

import Vue from 'vue'
import App from './App.vue'

// 1、 导入路由模块
import router from './router/index.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  //  1、挂载路由模块
  // router: router
  // 可以简写以下形式
  router
}).$mount('#app')

然后我们就可以使用路由了......

在 App.vue 中使用路由

<template>
  <div class="app-container">
    <h1>APP 根组件</h1>
    <hr>

    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>

在index.js中配置相应的路由规则即可使用对应的组件了......