路由之間的跳轉有再種：
1、通過標籤<router-link to='/login'>去登錄</router-link>實現跳轉
2、通過js實現：
this.$router.push({path:'/buy'})
this.$router.replace({path:'/buy'})
2.1push與replace的區別
push會向history插入新記錄
replace不會插入history歷史記錄，如果返回上一頁，則會跳轉到上上一頁中。上一頁是不存在的
返回上一頁面：this.$router.go(-1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
var Login={
template:`
<div>去登錄去吧</div>
`
}
var Register={
template:`
<div>去註冊去吧</div>
`
}
var Buy={
template:`
<div>去買東西</div>
`
}
// 安裝插件
Vue.use(VueRouter);
// 創建路由對象
var router = new VueRouter({
// 配置路由對象
routes: [
{path:'/login', name:'login', component:Login},
{path:'/register', name:'register', component: Register},
{path:'/buy', name:'buy', component: Buy}
]
})
new Vue({
el:'#app',
router,
template:`
<div>
<router-link to='/login'>去登錄</router-link>
|
<router-link to='/register'>去註冊</router-link>
<div>
<button @click="gogo">點我買東西</button>
<button @click="back">返回上一頁</button>
</div>
<router-view></router-view>
</div>
`,
methods:{
gogo(){
// 有歷史記錄跳轉
// this.$router.push({path:'/buy'})
// 沒有歷史記錄跳轉
this.$router.replace({path:'/buy'})
},
back(){
// 返回上一頁
this.$router.go(-1)
}
}
})
</script>
</body>
</html>