Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
137 lines (125 sloc) 4.22 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Decouple component from Router</title>
<script src="../../lib/vue.js"></script>
<script src="../../lib/vue-router.js"></script>
<link rel="stylesheet" href="../../css/bootstrap.min.css">
<style>
.main {
background-color: antiquewhite;
height: 500px;
padding: 10px 10px;
}
</style>
</head>
<body class="container-fluid">
<div id="app">
<div class="main">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary" @click="goFirst">第一页</button>
<button type="button" class="btn btn-secondary" @click="goSecond">第二页</button>
<button type="button" class="btn btn-secondary" @click="goThird">第三页</button>
<button type="button" class="btn btn-secondary" @click="goFourth">第四页</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary" @click="pre">后退</button>
<button type="button" class="btn btn-secondary" @click="next">前进</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary" @click="replace">替换当前页为特殊页</button>
</div>
</div>
<router-view></router-view>
</div>
</div>
<script>
const first = {
template: '<h3>当前是第一页</h3>'
}
const second = {
props: ['id'],
template: '<h3>当前是第二页 --- {{id}} </h3>'
}
const third = {
props: ['name'],
template: '<h3>当前是第三页 --- {{name}} </h3>'
}
const fourth = {
props: ['id', 'name'],
template: '<h3>当前是第四页 --- {{id}} --- {{name}} </h3>'
}
const special = {
template: '<h3>特殊页面</h3>'
}
const router = new VueRouter({
routes: [{
path: '/first',
component: first
}, {
path: '/second/:id',
component: second,
props: true
}, {
path: '/third/:name',
component: third,
props: {
name: 'zhangsan'
}
}, {
path: '/fourth',
component: fourth,
props: (route) => ({
id: route.query.id,
name: 'zhangsan'
})
}, {
path: '/special',
component: special
}]
})
const vm = new Vue({
el: '#app',
data: {},
methods: {
goFirst() {
this.$router.push({
path: '/first'
})
},
goSecond() {
this.$router.push({
path: '/second'
})
},
goThird() {
this.$router.push({
path: '/third'
})
},
goFourth() {
this.$router.push({
path: '/fourth'
})
},
next() {
this.$router.go(1)
},
pre() {
this.$router.go(-1)
},
replace() {
this.$router.replace({
path: '/special'
})
}
},
router: router
})
</script>
</body>
</html>
You can’t perform that action at this time.