Vue-router router-link

Vue-router router-link教程

Vue 路由(vue-router) 用来切换 Vue 组件时的超链接，必须使用 # 。Vue 路由(vue-router) 的 router-link 标签，可以默认为我们在超链接前面添加 #，方便了我们代码的书写。

Vue-router router-link详解

语法

<router-link to="/login" tag="span">登录</router-link>

参数

参数	描述
to	我们需要跳转的路由。
tag	Vue-router router-link 默认被渲染为 a 标签，可以使用 tag 属性，指定将其渲染为 span 标签。

案例

创建Vue路由(vue-router)

使用 router-link 标签来代替 a 标签

<!DOCTYPE html>
<html>
<head>
	<title>Vue路由(vue-router)</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<!-- router-link 默认渲染为 a 标签 -->
		<router-link to="/login">登录</router-link>
		<router-link to="/register">注册</router-link>
		<router-view></router-view>
	</div>
    <p>嗨客网（www.haicoder.net）</p>
</body>
<script type="text/javascript">
	var login = {
		template: '<h1>登录组件</h1>'
	}
	var register = {
		template: '<h1>注册组件</h1>'
	}
	var routerObj = new VueRouter({
		routes: [ 
			{path: "/login", component: login},
			{path: "/register", component: register}
		]
	})
	var vm = new Vue({
        el : '#app',
        data:{
        	msg: "嗨客网"
        },
        router: routerObj 
    });
</script>
</html>

程序运行后，浏览器显示效果如下：

02 vue router routerlink.png

我们使用超链接来实现切换路由从而实现切换组件的效果，超链接必须是以 # 号开始。这里我们使用了 router-link 标签，通过里面的 to 属性来指定跳转的路由，这样就不需要手动添加 #。

创建Vue路由(vue-router)

使用 router-link 标签的 tag 属性将 a 标签渲染为 span 标签

<!DOCTYPE html>
<html>
<head>
	<title>Vue路由(vue-router)</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<router-link to="/login" tag="span">登录</router-link>
		<router-link to="/register" tag="span">注册</router-link>
		<router-view></router-view>
	</div>
    <p>嗨客网（www.haicoder.net）</p>
</body>
<script type="text/javascript">
	var login = {
		template: '<h1>登录组件</h1>'
	}
	var register = {
		template: '<h1>注册组件</h1>'
	}
	var routerObj = new VueRouter({
		routes: [ 
			{path: "/login", component: login},
			{path: "/register", component: register}
		]
	})
	var vm = new Vue({
        el : '#app',
        data:{
        	msg: "嗨客网"
        },
        router: routerObj 
    });
</script>
</html>

程序运行后，浏览器显示效果如下：

03 vue router routerlink.png

我们使用 router-link 标签的 tag 属性将默认的 a 标签渲染为 span 标签。

Vue-router router-link总结

Vue 路由(vue-router) 用来切换 Vue 组件时的超链接，必须使用 # 。Vue 路由(vue-router) 的 router-link 标签，可以默认为我们在超链接前面添加 #，方便了我们代码的书写。