12.vue-router相关API（1）router-link和router-view

官网链接：https://router.vuejs.org/zh/api

：

 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的  标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

to：

表示目标路由的链接。

	
	
	
	


	

		
{{msg}}
		Home
		
	
	

可以看出，vue地router，是类似一种处理id的方式进行页面的显示。

replace：

设置 replace 属性的话，当点击时，导航后不会留下 history 记录。改部分代码如下：

Home

append：

设置 append 属性后，则在当前 (相对) 路径前添加基路径。改部分代码如下：

Home

tag：

有时候想要  渲染成某种标签，例如 

。 可以使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。改部分代码如下：

Home

active-class：

设置链接激活时使用的 CSS 类名。默认值: "router-link-active"。改部分代码如下（只是突出演示）：

Home

exact：

“是否激活”默认类名的依据是包含匹配。如下，是被激活的。

改部分代码如下：

Home

现在不激活了。

event：

声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。改部分代码如下：

Home

要双击才能激活了，点击一下已经不能激活了。

exact-active-class：

配置当链接被精确匹配的时候应该激活的 class。默认值是"router-link-exact-active"。

改部分代码如下：

Home

aria-current-value：

当链接根据精确匹配规则激活时配置的 aria-current 的值，这个值应该是 ARIA 规范中允许的 aria-current 的值（'page' | 'step' | 'location' | 'date' | 'time'）。默认值是"page"。

改部分代码如下：

Home

：

用于显示组件的视图。需要在VueRouter实例对象中匹配好对应的组件。代码如下：

	
	
	
	


	

		
{{msg}}
		Home
		
	
	

name：

如果 设置了名称，则会渲染对应的路由配置中 components 下的相应组件。部分代码改成如下：

html：

js：

		const router = new VueRouter({
			routes: [
				{
					path: '/home',
					components: {
						default: {
							template: '
默认的组件
',
						},
						home: {
							template: '
匹配 home 路径的组件
',
						},
						test: {
							template: '
test 路径的组件
',
						}
					}
				}
			]
		})