首先了解页面导航的两种方式
声明式导航:通过点击链接实现导航的方式 叫做声明式导航
例如:普通网页中的 a链接 或 vue中的<router-link></router-link>
编程式导航:通过调用JavaScript形式的API实现导航的方式 叫做编程式导航
例如:普通网页中的location.href
常用的编程式导航API如下:
this.$router.push('hash地址')
this.$router.go(n). //前进或后退
在user界面给个btn按钮 点击user跳转到用户登录
跳转到用户登录后 再返回(后退-1,前进1)到之前的user界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- 导入vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- router-link 默认渲染为一个a标签 -->
<router-link to="/user/1">user1</router-link>
<router-link to="/user/2">user2</router-link>
<router-link to="/user/3">user3</router-link>
<router-link to="/login">用户登录</router-link>
<router-view></router-view>
</div>
</body>
</html>
<script>
//组件的模版对象
const user = {
template: `<div>
<h3>user组件 用户id为{{$route.params.id}}</h3>
<button @click="goLogin()">跳转到用户登录</button>
</div>`,
methods: {
goLogin() {
this.$router.push('/login') //编程式导航api跳转
}
}
}
// const login = {
// template: '<h3>用户登录组件</h3>'
// }
const login = {
template: `<div>
<h3>用户登录组件</h3>
<button @click="goBack()">返回</button>
</div>`,
methods: {
goBack() {
this.$router.go(-1)
}
}
}
//创建一个路由对象
const routerObj = new VueRouter({
routes: [{ //路由匹配规则
path: '/',
redirect: '/user'
}, {
path: '/user/:id', //id可以任意取 如uid 不是固定值
component: user
}, {
path: '/login',
component: login
}]
})
//创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
methods: {},
router: routerObj //将路由规则对象,注册到 vm 实例上,用来监听 URL 地址的变化,然后展示对应的组件
});
</script>