路由配置总结

在 Vue 中，一级路由和二级路由的配置主要依赖于 vue-router 插件。以下是关于一级路由和二级路由配置的总结：

一、安装 vue-router

你可以通过 npm 或 yarn 来安装 vue-router。在命令行中运行以下命令：

• 使用 npm: npm install vue-router --save
• 使用 yarn: yarn add vue-router

二、一级路由配置

导入 Vue 和 VueRouter：

	import Vue from 'vue';
	import VueRouter from 'vue-router';

使用 VueRouter 插件：

Vue.use(VueRouter);

1. 定义一级路由组件：创建你的一级路由组件，这些组件将在不同的 URL 路径下进行导航。

2. 创建 VueRouter 实例并配置一级路由：

	const router = new VueRouter({
	routes: [
	{
	path: '/path1', // 路径名
	component: Component1, // 组件名
	},
	// 其他一级路由配置...
	],
	});

在主入口文件（如 main.js）中，将路由实例传递给 Vue 实例：

	new Vue({
	router,
	// ...其他配置
	}).$mount('#app');

在 App.vue 中写入 <router-view> 标签进行一级路由配置：

<router-view></router-view>

三、二级路由配置

1. 定义二级路由组件：创建你的二级路由组件，这些组件将在一级路由下的不同子路径下进行导航。

2. 在一级路由配置中添加 children 属性来配置二级路由：

	const router = new VueRouter({
	routes: [
	{
	path: '/path1',
	component: Component1,
	children: [
	{
	path: 'child1', // 注意这里不需要斜杠，表示它是 /path1/child1 的子路径
	component: ChildComponent1,
	},
	// 其他二级路由配置...
	],
	},
	// 其他一级路由配置...
	],
	});

在对应的一级路由组件（如 Component1.vue）中写入 <router-view> 标签进行二级路由配置：

<router-view></router-view>

这样，当访问 /path1/child1 时，就会显示 ChildComponent1 组件的内容。

四、路由模式

Vue Router 提供了两种路由模式：hash 模式和 history 模式。默认情况下，使用的是 hash 模式。如果你想要使用 history 模式，可以在创建 VueRouter 实例时添加 mode: 'history' 配置项。注意，使用 history 模式时，需要确保服务器能够正确处理所有的 URL 请求，否则可能会出现 404 错误。

五、路由重定向和 404 页面

你可以在路由配置中添加重定向和 404 页面。例如，你可以将根路径 / 重定向到某个一级路由路径，或者为未匹配到的路径显示一个 404 页面。这可以通过在路由配置中添加重定向和通配符路由来实现。