<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编程式路由的实现</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<button type="button" @click="fun1()">跳转1</button>
</div>
<div>
<button type="button" @click="fun2()">跳转2</button>
</div>
<div>
<button type="button" @click="fun3()">跳转3</button>
</div>
<router-view></router-view>
</div>
<script>
//定义路由项
const router = new VueRouter({//路由对象,实例的定义
routes:[//定义路由项
{
path:'index/:id',
name:'index',
component:{
template:'<div>{
{$route.params.id}}</div>'//接路由方式的 跳转
}
},
{
path:'/test/:id',
name:'test',
component:{
template:'<div>{
{$route.params.id}}</div>'//接路由方式的 跳转
}
},
{
path:'/go',
name:'go',
component:{
template:'<div>{
{$route.query.uid}}</div>'//接路由方式的 跳转
}
}
]
});
let vm = new Vue({
el:'#app',
router,//注册到vue实例中
methods:{
fun1(){
//replace方法实现路由跳转,根据路由项的name进行跳转
this.$router.replace({name:'index',params:{id:Math.random()}});
},
fun2(){
//push方法实现路由跳转,根据路由项的path进行跳转
this.$router.push(`/test/${Math.random()}`);
},
fun3(){
this.$router.push({path:'/go',query:{uid:110}});
}
}
});
</script>
</body>
</html>
