解释 Vue route和router的区别?
在 Vue.js 中,”route” 和 “router” 是两个非常重要的概念,它们在 Web 应用的导航中发挥了关键作用。
- Vue Router:Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 核心深度集成,使得构建单页面应用(SPA)变得轻而易举。在实际应用中,我们通常使用 Vue Router 创建一个路由实例,然后设置一些路由配置,比如路由的路径、映射的组件等。然后我们将这个路由实例挂载到 Vue 实例上。
例如:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
- Route:Route 是 Vue Router 中的一个概念,表示一个路由的状态信息。比如当前的路径、参数、查询参数等。它是一个 JavaScript 对象,包含了当前 URL 解析出来的信息,还有 URL 和路由映射关系等信息。你可以在任何组件内通过
this.$route
来访问当前的 route 对象。
例如:
export default {
computed: {
username() {
return this.route.params.username
}
},
methods: {
goBack() {
this.router.go(-1)
}
}
}
在这个例子中,我们通过 this.$route.params.username
获取当前 URL 中的参数。
总结,Vue Router 是整个路由管理器,而 route 是表示当前路由的状态信息。