【完整项目搭建】基于vue-cli实现vue前端搭建考试系统——③项目开发中引入vue-router，并进行配置

1、引入vue - router ：搜索vue-router，打开vue-router官方文档

2、由于本项目基于vue2开发，因此将官网切换到v3.x版本，在导航-安装目录下选择npm安装方式

安装命令如下

npm install vue-router

由于上述命令会安装最新版本，而不是适配的v3.x版本，因此使用@方式指定版本号

npm install vue-router@版本号

①通过百度npm，在npm中可以查找到v3.x（vue-router 3）的最近版本

②在npm官网中键入 vue-router 进行搜索，选中第一项

③点击versions，即可查找到对应版本号

扫描二维码关注公众号，回复： 14985053 查看本文章

由上图发现v3.x最近版本号为3.6.5，打开vscode终端进行安装

安装命令如下，输入后键入回车，进行安装

 npm install [email protected]

下载完成

打开 package.json 进行验证

3、对vue-router进行配置：在src目录下新建router文件夹，在router文件夹下新建index.js文件

打开vue-router 官方文档，发现如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

相关代码如下：

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

4、按照javascript的说明，首先在src文件夹下新建views文件夹，注册.vue组件

①组件注册完成后在router文件夹下的index.js 进行引用

代码如下：

//创建路由组件
import Home from '../views/Home.vue'
import User from '../views/User.vue'

②将路由与组件进行映射

代码如下:

//将路由与组件进行映射
const routes = [
    { path: '/home', component: Home},
    { path: '/user', component: User}
  ]

③创建router 实例

代码如下：

//创建 router 实例
const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
})

④将router实例对外暴露

代码如下：

//将当前router实例对外进行暴露
export default router

router文件下的index.js完整代码如下：

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


//创建路由组件
import Home from '../views/Home.vue'
import User from '../views/User.vue'



//将路由与组件进行映射
const routes = [
    { path: '/home', component: Home },
    { path: '/user', component: User }
]

//创建 router 实例
const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
  })

//将当前router实例对外进行暴露
export default router

5、创建和挂载根实例，打开src文件下的main.js ，引入router

在当前实例上进行挂载

main.js文件的完整代码如下：

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

//全局引入element ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//引入router
import router from './router'

//对element ui进行全局注册
Vue.use(ElementUI);

Vue.config.productionTip = false

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

6、匹配路由出口，将组件进行在App.vue文件中渲染

代码如下：

①匹配路由出口

  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>

②App.vue完整代码：

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row> -->

    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
    
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  // components: {
  //   HelloWorld
  // }
}
</script>

<style>

</style>

7、启动项目进行验证

发现项目报错

解决方式：打开vue.config.js，添加lintOnSave:false；

保存，重新运行【有时运行失败先关闭vscode，重新在终端输入npm run serve指令】

初始进入页面如下：

通过更改url的地址（添加user或home），实现路由切换

至此，vue-router代码配置完成

【完整项目搭建】基于vue-cli实现vue前端搭建考试系统——③项目开发中引入vue-router，并进行配置

猜你喜欢