在Vue Router中,path
和 component
是路由配置对象中最重要的两个属性。它们共同定义了路由的匹配规则和当路由被匹配时应该渲染哪个组件。
path 属性
作用:path
属性指定了路由的匹配规则,即当用户访问某个URL时,Vue Router会检查这个URL是否与某个路由的path
属性相匹配。
值:path
属性的值通常是一个字符串,表示URL的路径部分。它可以是静态的,也可以是包含动态部分的(通过:
来指定动态段)。
{ path: '/user/:id', // 动态路径,包含一个名为id的动态段 // 其他配置...
}
component属性
作用:component
属性指定了当路由被匹配时应该渲染哪个Vue组件。
值:component
属性的值通常是一个Vue组件的构造函数或者是一个通过import
导入的组件对象。
{ path: '/user/:id', component: UserProfile // 假设UserProfile是一个Vue组件 // 其他配置...
}
完整事例:
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import UserProfile from '@/components/UserProfile.vue'; Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/user/:id', name: 'UserProfile', component: UserProfile } ]
});
在这个示例中,我们定义了两个路由:一个是根路径/
,当用户访问这个路径时,会渲染Home
组件;另一个是/user/:id
,这是一个动态路径,当用户访问这个路径时(例如/user/123
),会渲染UserProfile
组件,并且可以通过this.$route.params.id
在UserProfile
组件中访问到动态段id
的值。