1、声明式导航:
含义:通过点击链接实现导航的方式,叫做声明式导航;
普通网页中的<a></a>链接或vue中的<router-link></router-link>
2、编程式导航:
含义:通过调用JavaScript形式的 API实现导航的方式,叫做编程式导航;
例如:普通网页中的location.href
2.1、vue编程式导航
常用的编程式导航API如下:
this.$router.push('hash地址');
this.$router.go(n);
应用:
<div id="app">
<router-view></router-view>
</div>
<script type='text/javascript'>
const User = {
template: `<div>
<button @click="goRegister">跳转到注册页面</button>
</div>`,
methods: {
goRegister() {
this.$router.push('/register')
}
}
}
const Register = {
template: `<div>
<h1>Register 组件</h1>
<button @click="goBack">后退</button>
</div>`,
methods: {
goBack() {
this.$router.go(-1)
}
}
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [ {
path: '/',
component: User
}, {
path: '/register',
component: Register
}]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>