当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 12.vue-router相关API（1）router-link和router-view

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

2020年07月14日  | 移动技术网IT编程  | 我要评论

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

<router-link>：

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

to：

表示目标路由的链接。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1.router-link Props to</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<router-link to="/home">Home</router-link>
		<router-view></router-view>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		const router = new VueRouter({})
		const app = new Vue({
			router: router,
			data(){
				return {
					msg: 'to'
				}
			},
		}).$mount('#app');
	</script>
</body>
</html>

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

replace：

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

<router-link to="/home" replace>Home</router-link>

append：

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

<router-link to="home" append>Home</router-link>

tag：

有时候想要 <router-link> 渲染成某种标签，例如 <li>。 可以使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。改部分代码如下：

<router-link to="/home" tag="home">Home</router-link>

active-class：

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

<router-link to="/home" active-class="激活">Home</router-link>

exact：

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

改部分代码如下：

<router-link to="/home" exact>Home</router-link>

现在不激活了。

event：

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

<router-link to="/home" event='dblclick'>Home</router-link>

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

exact-active-class：

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

改部分代码如下：

<router-link to="/home" exact-active-class='激活的 class'>Home</router-link>

aria-current-value：

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

改部分代码如下：

<router-link to="/home" aria-current-value='time'>Home</router-link>

<router-view>：

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1.router-link Props to</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<router-link to="/home">Home</router-link>
		<router-view></router-view>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		const router = new VueRouter({
				routes: [
						{
							path: '/home',
							component: {
								template: '<div>匹配 home 路径的组件</div>',
							}
						}
				],
		})
		const app = new Vue({
			router: router,
			data(){
				return {
					msg: 'to'
				}
			},
		}).$mount('#app');
	</script>
</body>
</html>

name：

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

html：

<router-view name='home'></router-view>

js：

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

本文地址：https://blog.csdn.net/weixin_47870554/article/details/107297830

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网