一、简介

点击查看vue-router官网

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置-
• 路由参数、查询、通配符-
• 展示由 Vue.js 的过渡系统提供的过渡效果-
• 细致的导航控制-
• 自动激活 CSS 类的链接-
• HTML5 history 模式或 hash 模式-
• 可定制的滚动行为-
• URL 的正确编码

二、安装

2.1 包管理器

对于一个现有的使用 JavaScript 包管理器的项目，你可以从 npm registry 中安装 Vue Router：

npm install vue-router@4  //vue2 安装对应的版本vue-router@3，例如指定版本：3.6.5 npm install vue-router@3.6.5 

如果你打算启动一个新项目，你可能会发现使用 create-vue 这个脚手架工具更容易，它能创建一个基于 Vite 的项目，并包含加入 Vue Router 的选项：

npm create vue@latest 

你需要回答一些关于你想创建的项目类型的问题。如果您选择安装 Vue Router，示例应用还将演示 Vue Router 的一些核心特性。

使用包管理器的项目通常会使用 ES 模块来访问 Vue Router，例如 import { createRouter } from ‘vue-router’。

三、实例演示

Vue Router 是 Vue 官方的客户端路由解决方案。

客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

Vue Router 基于 Vue 的组件系统构建，你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

提醒：下面实例是在TestVue2的项目里运行的

3.1 TestVue2项目结构图

3.2 安装 vue-router@3.6.5

npm install vue-router@3.6.5 

安装成功后，查看package.json文件

3.3 创建路由器实例

1. 在src目录里创建views文件夹，在里面分别创建teststore1.vue和teststore2.vue文件
   
   
2. 在src目录里创建router文件夹，在里面创建index.js文件

router文件夹里index.js文件代码

import Vue from 'vue' import Router from 'vue-router' import TestStore1 from '../views/teststore1.vue' Vue.use(Router) export default new Router({ 	mode:'history', 	// base: 'http://192.168.0.102:8080/', 	// 下面第一个 path:'/', 解决默认进入的官方首页问题 	routes:[ 		{ 			name:'首页', 			path:'/', 			component: () => import ("../views/home.vue") 		}, 		{ 			name:'状态管理1', 			path:'/teststore1', 			component: TestStore1, 			meta:{ 				title:'store1' 			} 		}, 		{ 			name:'状态管理2', 			path:'/teststore2', 			component: () => import("../views/teststore2.vue") 		}, 	] }) 

teststore1.vue代码

teststore2.vue代码

四、注册路由器插件

在router文件里index.js里使用了Vue.use(Router)，接下来在main.js将index.js导入， 将其注册为插件

main.js文件代码

import Vue from 'vue' import App from './App.vue' // 将 Vuex Store 注入到应用中 //import store from './store' import router from './router' Vue.config.productionTip = false // Vue.prototype.$store = store  // https://www.jb51.net/javascript/297247rzd.htm // 如果使用 ES6，你也可以以 ES6 对象的 property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)： new Vue({ 	router, 	render: h => h(App), }).$mount('#app')  // 使用 ES2015 语法 // new Vue({ // 	router: router, // 	store: store, // 	render: h => h(App), // }).$mount('#app') 

等价于

const app = createApp(App) app.use(router) app.mount('#app') 

和大多数的 Vue 插件一样，use() 需要在 mount() 之前调用。

如果你好奇这个插件做了什么，它的职责包括：

• 全局注册 RouterView 和 RouterLink 组件。
• 添加全局 $router 和 $route 属性。
• 启用 useRouter() 和 useRoute() 组合式函数。
• 触发路由器解析初始路由。

五、App.vue里使用router-view

App.vue文件代码

六、访问路由器和当前路由

你很可能想要在应用的其他地方访问路由器。

如果你是从 ES 模块导出路由器实例的，你可以将路由器实例直接导入到你需要它的地方。在一些情况下这是最好的方法，但如果我们在组件内部，那么我们还有其他选择。

在组件模板中，路由器实例将被暴露为$router。这与同样被暴露的 $route 一样，但注意前者最后有一个额外的 r。

如果我们使用选项式 API，我们可以在 JavaScript 中如下访问这两个属性：this.$router 和 this.$route。在演练场示例中的 home.vue 组件中，路由器就是这样获取的。

home.vue代码

这里调用了 push()，这是用于编程式导航的方法

七、启动TestVue2项目

在终端里输入下面命令：
提醒：因为电脑里node版本问题，前面加了NODE_OPTIONS=–openssl-legacy-provider

NODE_OPTIONS=--openssl-legacy-provider npm run serve 

八、效果图

home.vue页面


teststore1.vue页面


teststore2.vue页面

九、TestVue2项目源码

点击查看TestVue2源码