vue中的router和router

VueRouter

Vue-Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
实现根据不同的请求地址 而显示不同的组件

个人理解：

类似于中转站。统一管理地址，根据地址的不同，调用地址对应的组件。

路由的使用

1. 安装路由模块

npm install vue-router

2. 在main.js中配置

import VueRouter from 'vue-router'
// 注册到vue后使用
Vue.use(VueRouter)
// ...

3. 创建VueRouter实例，挂在到根实例中(App.vue中)

// 引入组件
import [组件名] from '[路径]'
	…
// 配置路由表
const appRouter = new VueRouter({
	routes:[
		{path:'/list', component:[组件名] / {直接定义组件}},
			…
	]
})

在src/App.vue中配置

new Vue({
    el: '#app',
    render: h => h(App),
    // 配置实例选项 router 为你在上面 new 出来的 VueRouter 实例对象
    router: appRouter
});

4. 在src/App.vue组件中设置路由出口(router-view标签)
   指定路由要渲染的位置。

router和route的对比

VueRouter：

afterHooks: []
app: Vue {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
apps: [Vue]
beforeHooks: []
fallback: false
history: HashHistory {router: VueRouter, base: "", current: {…}, pending: null, ready: true, …}
matcher: {match: ƒ, addRoutes: ƒ}
mode: "hash"
options: {routes: Array(3)}
resolveHooks: []
currentRoute: (...)
__proto__: Object

route

Object
fullPath: "/brand"
hash: ""
matched: [{…}]
meta: {}
name: "Brand"
params: {}
path: "/brand"
query: {}
__proto__: Object

router:
全局路由 VueRouter的实例
常用来做方法内的路由跳转
route：
当前组件的路由
解析当前组件的url，获取对应的信息
常用来获取url中传递的参数