vue学习 30路由精讲之路由name属性及跳转方法
知识点: 路由起一个名字,路由跳转方法const routes = [{path: '/',name: 'homeLink',//路由的名字component: Home},{path: '/menu',name: 'menuLink',component: Menu},{path: '/admin',name: 'adminL...
·
知识点: 路由起一个名字,路由跳转方法
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>
更多推荐
已为社区贡献4条内容
所有评论(0)