router为VueRouter的实例。
?? ?$route可以从当前router跳转对象里面可以获取name、path、query、params等数据
?? ?$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法
在Vue.js中,route
和router
是两个相关但不同的概念。
route
(路由)指的是应用程序中定义的单个页面的配置信息。每个路由都有一个路径(path),以及与之关联的组件(component),还可以包含其他属性如名称(name)、参数(params)等。路由的作用是定义了URL与组件的对应关系,当用户访问某个URL时,路由系统将根据配置找到对应的组件进行渲染。
router
(路由器)是一个实例化的Vue Router对象,它是Vue.js应用程序中负责管理路由的主要机制。通过创建一个router
对象,我们可以定义应用程序的所有路由规则,并将其挂载到Vue实例上。router
对象提供了一些方法和属性,例如push
、replace
、go
等,用于导航和控制路由。
简而言之,route
是指单个页面的配置信息,而router
则是整个路由系统的管理者。通常我们会创建一个router
对象,并使用route
配置来定义应用程序的各个页面和URL之间的映射关系。
例如:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
// 其他路由配置...
]
});
new Vue({
router,
render: h => h(App)
}).$mount('#app');
在上述代码中,我们创建了一个router
对象,并将其挂载到Vue实例上,定义了两个路由:/
对应Home
组件,/about
对应About
组件。这样当用户访问不同的URL时,对应的组件将会被渲染到页面中。