vue-router(路由) 知识点汇总

概念

由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。

通过改变 URL，在不重新请求页面的情况下，更新页面视图。

vue-Router两种模式

• Hash — 默认值，利用 URL 中的hash("#")
• history-- 利用URL中的路径（/home）

设置路由模式

const router = new VueRouter({
   
  mode: 'history',
  routes: [...]
})

mode 区别：

• mode:“hash” 多了 “#”

http://localhost:8080/#/login

• mode:“history”

http://localhost:8080/home

vue-router参数传递

1. 用name传值（不推荐）
   1. 在路由文件src/router/index.js里配置name属性。

routes:[
		{
   
		path: ' / ',
		name: 'hello' ,
		component:Hello
	}
]

在模板里（src/App.vue)中￥router.name的形式接收

	<p>{
  {$router.name}}</p>

2. 通过 标签中的to传参

	<router-link