vue3 vue-router使用详解

- - 1 介绍
  - 2 Vue Router的使用
  - - 2.1 安装
    - 2.2 TS项目引入使用
    - - 2.2.1 创建路由文件
      - 2.2.2 main.ts 引入
      - 2.2.3 App.vue配置
      - 2.2.4 整体目录结构
    - 2.3 JS项目引入使用
    - - 2.3.1 router入口文件配置
      - 2.3.2 main.js文件
      - 2.3.3 App.vue文件
    - 2.4 使用方法
    - - 2.4.1 搭配router-view使用
      - 2.4.2 搭配router-link使用
      - 2.4.3 在 `setup` 中访问路由和当前路由
    - 2.5 其他API

1 介绍

Vue 很适合用来构建单页面应用。对于大多数此类应用，都推荐使用官方支持的Vue Router；在单页面应用(Single-page application）中，客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，因为这类场景下用户通常会在很长的一段时间中做出多次交互。这类的单页面应用中，路由的更新是在客户端执行的。

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

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

我们来介绍Vue Router的基本使用。以下我们分vue3+Typescript项目和vue3+JS项目进行引入介绍，以区分细微的差别。

2 Vue Router的使用

2.1 安装

对于vue3，我们推荐使用vue-router 4.x及以上版本。node环境安装如下：

 npm install vue-router@4复制

2.2 TS项目引入使用

在我们工程项目中，路由文件通常需要单独管理，以便于后续的使用以及维护。再此基础下，我们引入分为两步：

创建统一管理路由入口文件
vue项目引入使用路由入口文件

2.2.1 创建路由文件

在与main.ts文件的同级目录下创建router文件夹，并添加index.ts文件（使用ts，若使用js也同理）。

文件内容如下：

 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
// 项目其他页面路由（推荐使用）
import Practice from "../router/practiceFolder/practice";
 
// vue项目自带路由
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];
 
const routers = [...routes, ...Practice];
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [...routes, ...Practice]
});
 
export default router;
 复制

其中，使用RouteRecordRaw声明的对象会被当做路由对象，放入到路由对象池里。

createRouter创建路由；

createWebHistory代表路由使用 HTML5 模式，也是推荐使用的模式；

2.2.2 main.ts 引入

代码如下：

 import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
 
 
createApp(App)
  .use(store)
  .use(router)
  .mount("#app");复制

2.2.3 App.vue配置

 <script setup lang="ts">
import { RouterView } from 'vue-router'
</script>
 
<template>
  <RouterView />
</template>复制

2.2.4 整体目录结构

 ├── public/                             # 静态资源目录
├── src/
│   ├── assets/                         # 全局资源目录
│   │   ├── fonts/
│   │   └── images/
│   │
│   ├── components/                     # 全局组件
│   │   └── UserSelectTable/
│   │       ├── style/
│   │       │   ├── _var.scss
│   │       │   └── index.scss
│   │       ├── UserSelectTable.vue
│   │       └── index.ts
│   │
│   ├── store/                           # 状态管理
│   │   ├── plugins/
│   │   │   ├── persist.ts
│   │   │   └── qiankun.ts
│   │   ├── modules/                     # 除非业务过于复杂，否者不推荐
│   │   │   ├── cart.ts
│   │   │   └── products.ts
│   │   ├── getters.ts                   # 根级别的 getters
│   │   ├── actions.ts                   # 根级别的 action
│   │   ├── mutations.ts                 # 根级别的 mutation
│   │   └── index.ts
│   │
│   ├── router/
│   │   ├── routes.ts                   # 路由配置
│   │   └── index.ts
│   │
│   ├── views/                          # 页面级组件
│   │   ├── Home/
│   │   │   ├── components/             # 页面级组件
│   │   │   ├── services/               # 页面级组数据请求
│   │   │   │   └── repo.ts
│   │   │   └── Home.vue
│   │   │
│   │   └── About/
│   │       ├── components/
│   │       └──  About.vue
│   │
│   └── main.ts                         # 应用入口
│
├── .browserslistrc
├── .env
├── .editorconfig
├── .eslintrc.js
├── .prettierrc
├── babel.config.js
├── vue.config.js
├── jsconfig.json                       
└── package.json复制

2.3 JS项目引入使用

2.3.1 router入口文件配置

router文件夹index.js文件

 import { createRouter, createWebHistory } from "vue-router";
// 项目其他页面路由（推荐使用）
import Practice from "./practice/phonePractice.js";
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [...Practice]
});
 
export default router;复制

phonePractice.js文件路由写法：

 const routes = [
    {
      path: "/vuexPracitice",
      name: "vuexPracitice",
      component: () =>
        import("../../views/phonePage/vuexPracitice.vue")
    }
  ];
 
export default routes;复制

2.3.2 main.js文件

 import { createApp } from 'vue'
import App from './App.vue'
import store from "./store"
import router from './router'
const app = createApp(App)
 
app.use(store)
   .use(router);
 
app.mount('#app')复制

2.3.3 App.vue文件

 <template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>复制

至此，本地启动项目，访问：http://localhost:8080/vuexPracitice，则可访问到刚刚配置的路由。

2.4 使用方法

router引入之后，我们可以通过router自带的组件来进行路由管理，以方便大型项目的路由访问以及统一管理。以下介绍常用的几种用法。

2.4.1 搭配router-view使用

入之后我们单页面应用可以在app.vue配置使用router-view来切换页面，代码如下：

 <template>
  <router-view v-slot="{ Component }">
  </router-view>
</template>复制

引入之后，在 Vue 实例中，你可以通过 $router 访问路由实例，若想要导航到不同的 URL，使用this.$router.push(...)进行跳转

详细的router-view使用方法可见vue router-view使用详解

2.4.2 搭配router-link使用

当使用 <router-link> 时，内部会调用router.push(...)这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...)

2.4.3 在 `setup` 中访问路由和当前路由

因为我们在 setup 里面没有访问 this，所以我们不能再直接访问 this.$router 或 this.$route。作为替代，我们使用 useRouter 和 useRoute 函数：

 import { useRouter, useRoute } from 'vue-router'
 
export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
 
    function pushWithQuery(query) {
      router.push({
        name: 'about',
        query: {
          ...route.query,
        },
      })
    }
  },
}复制

2.5 其他API

除以上介绍的Vue Router基本API，还有如下API可供使用：

NavigationFailureType: 导航失败类型
START_LOCATION: 默认开始位置
createMemoryHistory: 使用记忆历史模式
createRouterMatcher:
createWebHashHistory: 创建哈希模式
createWebHistory: 创建html5模式
isNavigationFailure: 导航是否失败
onBeforeRouteLeave: 导航守卫，setup中使用，在当前位置的组件将要离开时触发。
onBeforeRouteUpdate: 导航守卫，setup中使用，在当前位置即将更新时触发。
parseQuery: 解析query参数
stringifyQuery: 字符串query参数
useLink: 将RouterLink 的内部行为作为一个组合式 API 函数公开。
useRoute: 替代this.$route
useRouter: 替代this.$router

本文参考官网，进行vue3路由配置实际操作，更加全面的使用请参考官网vue router。

	import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
	import Home from "../views/Home.vue";
	// 项目其他页面路由（推荐使用）
	import Practice from "../router/practiceFolder/practice";

	// vue项目自带路由
	const routes: Array<RouteRecordRaw> = [
	{
	path: "/",
	name: "Home",
	component: Home
	},
	{
	path: "/about",
	name: "About",
	component: () =>
	import(/* webpackChunkName: "about" */ "../views/About.vue")
	}
	];

	const routers = [...routes, ...Practice];

	const router = createRouter({
	history: createWebHistory(process.env.BASE_URL),
	routes: [...routes, ...Practice]
	});

	export default router;

	import { createApp } from "vue";
	import App from "./App.vue";
	import router from "./router";
	import store from "./store";


	createApp(App)
	.use(store)
	.use(router)
	.mount("#app");

	<script setup lang="ts">
	import { RouterView } from 'vue-router'
	</script>

	<template>
	<RouterView />
	</template>

	├── public/ # 静态资源目录
	├── src/
	│ ├── assets/ # 全局资源目录
	│ │ ├── fonts/
	│ │ └── images/
	│ │
	│ ├── components/ # 全局组件
	│ │ └── UserSelectTable/
	│ │ ├── style/
	│ │ │ ├── _var.scss
	│ │ │ └── index.scss
	│ │ ├── UserSelectTable.vue
	│ │ └── index.ts
	│ │
	│ ├── store/ # 状态管理
	│ │ ├── plugins/
	│ │ │ ├── persist.ts
	│ │ │ └── qiankun.ts
	│ │ ├── modules/ # 除非业务过于复杂，否者不推荐
	│ │ │ ├── cart.ts
	│ │ │ └── products.ts
	│ │ ├── getters.ts # 根级别的 getters
	│ │ ├── actions.ts # 根级别的 action
	│ │ ├── mutations.ts # 根级别的 mutation
	│ │ └── index.ts
	│ │
	│ ├── router/
	│ │ ├── routes.ts # 路由配置
	│ │ └── index.ts
	│ │
	│ ├── views/ # 页面级组件
	│ │ ├── Home/
	│ │ │ ├── components/ # 页面级组件
	│ │ │ ├── services/ # 页面级组数据请求
	│ │ │ │ └── repo.ts
	│ │ │ └── Home.vue
	│ │ │
	│ │ └── About/
	│ │ ├── components/
	│ │ └── About.vue
	│ │
	│ └── main.ts # 应用入口
	│
	├── .browserslistrc
	├── .env
	├── .editorconfig
	├── .eslintrc.js
	├── .prettierrc
	├── babel.config.js
	├── vue.config.js
	├── jsconfig.json
	└── package.json

	import { createRouter, createWebHistory } from "vue-router";
	// 项目其他页面路由（推荐使用）
	import Practice from "./practice/phonePractice.js";

	const router = createRouter({
	history: createWebHistory(process.env.BASE_URL),
	routes: [...Practice]
	});

	export default router;

	const routes = [
	{
	path: "/vuexPracitice",
	name: "vuexPracitice",
	component: () =>
	import("../../views/phonePage/vuexPracitice.vue")
	}
	];

	export default routes;

	import { createApp } from 'vue'
	import App from './App.vue'
	import store from "./store"
	import router from './router'
	const app = createApp(App)

	app.use(store)
	.use(router);

	app.mount('#app')

	<template>
	<div id="app">
	<router-view></router-view>
	</div>
	</template>

	<style>
	#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
	}
	</style>

	<template>
	<router-view v-slot="{ Component }">
	</router-view>
	</template>

	import { useRouter, useRoute } from 'vue-router'

	export default {
	setup() {
	const router = useRouter()
	const route = useRoute()

	function pushWithQuery(query) {
	router.push({
	name: 'about',
	query: {
	...route.query,
	},
	})
	}
	},
	}