vue学习 30路由精讲之路由name属性及跳转方法

知识点： 路由起一个名字，路由跳转方法

const routes = [{
		path: '/',
		name: 'homeLink',//路由的名字
		component: Home
	},
	{
		path: '/menu',
		name: 'menuLink',
		component: Menu
	},
	{
		path: '/admin',
		name: 'adminLink',
		component: Admin
	},
	{
		path: '/about',
		name: 'aboutLink',
		component: About
	},
	{
		path: '/login',
		name: 'loginLink',
		component: Login
	},
	{
		path: '/register',
		name: 'registerLink',
		component: Register
	},
	{
		path: '*',//不是上面所有的路由，则跳转到指定路由
		name: 'homeLink',
		redirect: '/'
	}
]

Home.vue

<template>
	<div>
		<h1>Home</h1>
		<button @click="goToMenu" class="btn btn-success">Let's order!</button>
	</div>
</template>

<script>
	export default{
		methods: {
			goToMenu: function(){
				// 跳转到上一次浏览的页面
				// this.$router.go(-1)
				
				// 指定跳转的地址
				// this.$router.replace('/menu')
				
				// 指定跳转路由的名字下
				// this.$router.replace({name: 'menuLink'})
				
				// 通过push跳转
				// this.$router.push('/menu')
				this.$router.push({name: 'menuLink'})
			}
		}
	}
</script>