Vue-router redirect

Vue-router redirect教程

在 Vue 中，Vue 路由(vue-router) 的 redirect 标签，可以实现路由的跳转，即将一个路由重定向到另一个路由。

Vue-router redirect详解

语法

var routerObj = new VueRouter({
    routes: [ 
        {path: "/", redirect: '/login'},
        {path: "/login", component: login},
        {path: "/register", component: register}
    ]
})

说明

这里，我们使用 Vue-router redirect 将默认的根路径路由重定向到了 /login 路由。

案例

重定向路由

使用 redirect 属性来实现路由的重定向

<!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">登录</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: "/", redirect: '/login'},
			{path: "/login", component: login},
			{path: "/register", component: register}
		]
	})

	var vm = new Vue({
        el : '#app',
        data:{
        	msg: "嗨客网"
        },
        router: routerObj 
    });
</script>
</html>

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

04 vue router redirect.png

我们没有使用 redirect 重定向的时候，默认跳转到根路径路由时，页面不会显示任何的元素。这里我们使用了 redirect ，将根路径路由重定向到了 /login 路由，所以我们默认打开跟路径路由时，会被重定向到 /login 路由。

Vue-router redirect总结

在 Vue 中，Vue 路由(vue-router) 的 redirect 标签，可以实现路由的跳转，即将一个路由重定向到另一个路由。