vur router学习

1、简介

Vue Router 是 Vue.js (opens new window)官方的路由管理器。
它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌

2、简单使用

<router-link to='组件路径'></router-link>
<!--将上面匹配到的组件展示-->
<router-view></router-view>

标签	属性	作用
router-link
	to	表示目标路由的链接
	replace	默认为false,为true将不会留下history记录
	append	默认为false,为true将指向的路径添加到基路径上
router-view	name	默认default,表示渲染当前的路由匹配到的组件.也可以指定一个组件进行渲染

3、动态路由匹配

• 响应路由参数数

1、定义一个路由

route{path: 'user/:id', component:  User}

其中id为变量，该路由会将user/123（或456）都匹配到User组件
2、对匹配到的路由进行使用

const User = {   
template: '<div>User {{ $route.params.id }}</div>'
}

$route对象不太清楚

• 捕获所有路由

设置 path: '*'来匹配所有路由,或者设置为path: 'user-*'匹配所有以user- 开头的路由

• 匹配优先级

当匹配到多个路由时，先定义的先使用,所以一般将404页面的路由放在最后定义

4、嵌套路由

/home/content1							/home/content2
+------------------+                  +------------------+
| +--------------+ |				  | +--------------+ |
| |  header      | |                  | |  header      | |
| +--------------+ |                  | +--------------+ | 
| |  content1    | | +------------>   | |  content2    | |
| |              | |                  | |              | |  
| +--------------+ |                  | +--------------+ |
| |  footer	     | |				  | |  footer	   | |
| +--------------+ |				  | +--------------+ |
+------------------+                  +-----------------+

其中footer和header可以复用，可以写两个组件放置在home组件里，而content部分可以包含一个<vouter-view>,作为路由的出口