<!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>Document</title>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
</head>
<body>
<div id="div1">
<!-- <router-link class='nav' to="/a/34">新闻</router-link>
<router-link class='nav' to="/b">娱乐</router-link>
<router-link class='nav' to="/c">天气</router-link> -->
<input type="button" value='页面1' @click='fn1()'>
<input type="button" value='页面2' @click='fn2()'>
<input type="button" value='页面3' @click='fn3()'>
<router-view></router-view>
</div>
<script>
let router = new VueRouter({
routes: [{
path: '/a/:id',
name: 'news',
component: {
template: '<div>{{$route.params.id}}</div>'
}
},
{
path: '/b',
name: 'entertainment',
component: {
template: '<div>bbb</div>'
}
},
{
path: '/c',
name: 'whether',
component: {
template: '<div>ccc</div>'
}
},
]
})
let vm = new Vue({
el: '#div1',
router,
methods: {
fn1() {
//this.$router.push('/a/19');
this.$router.push({
name: 'news',
params: {
id: 12
}
});
},
fn2() {
this.$router.push('/b');
},
fn3() {
this.$router.push('/c');
}
},
watch: {
$route(value, old_value) {
console.log(value, old_value);
}
}
})
</script>
</body>
</html>
扫一扫
5137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
