vue-router的基本使用

什么是vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
可以访问其官方网站对其进行学习：https:/router.vuejs.org/zh/
vue-router是基于路由和组件的
路由用于设定访问路径，将路径和组件映射起来。
在vue-router的单页面应用中，页面的路径的改变就是组件的切换

安装vue-router

安装方法一：
在终端输入npm指令安装：

npm install vue-router --save

安装方法二：
vue3.0后可通过可视化脚手架进行安装：

安装后可在package.json看到配置信息：

使用vue-router

创建router组件

在项目src目录下创建router（名字自选）文件夹，在该文件夹下创建index.js文件：

1.在router/index.js中：

//配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routes = [
	//用于存放映射
]
const router = new VueRouter({
	//配置路由和组件之间的应用关系
	routes
})

//3.将router对象传入到vue实例
expost default router

2.将其全局的main.js中进行挂载:

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

配置路由映射

在component文件夹中创建两个组件：

配置组件和路径的映射关系：

在App.vue写入两个跳转链接

注：运行程序一开始会渲染App.vue的内容是因为在全局的main.js中 App.vue进行了render：

使用路由结果

此时会在主页出现两个跳转界面，但是点击会发现没有其他内容显示：

原因：需要vue-router自带的router-view标签来对组件内容进行显示(写在上面两个词下面则显示在下面，写在两个词上面则显示在上面。

结果：点击首页

点击关于：