将路由与组件绑定

Vue

• 为某个组件指定某个路由匹配规则

实例

child::

实例

路由定义

import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
	history: createWebHistory(),
	routes: [
		{
			path: '/', component: () => import('@/components/home-route.vue'), children: [
				{
					path: 'a', component: () => import('@/components/a-route.vue'), children: [
						{ path: 'b', component: () => import('@/components/b-route.vue') },
					]
				}
			]
		}
	]
})
export default router

路由组件定义

home:

<template>
  <p>Home Route</p>
  <router-view />
</template>

a:

<template>
  <router-view></router-view>
</template>

b:

<template>
  <p>I' m b-route</p>
</template>

效果图

当路径为localhost:5137/a/b时

指向原始笔记的链接

嵌套

child::嵌套路由

给路由组件传递参数

child::使用URL参数为路由组件传递参数