编程式路由导航
实例中定义一个方法，这个方法绑定在标签上
然后就设置路由跳转
语法 this.$router.history.push('要跳转路由的地址')
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color:red; } </style> </head> <body> <div id="app"> <!--编程时导航--> <button @click="goHome">去首页</button> <button @click="goList">去列表</button> <router-view></router-view> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script src="node_modules/vue-router/dist/vue-router.js"></script> <script> let home={ template:'<div>home</div>' }; let list={ template:'<div>list</div>' } const routes=[ {path:'/home',component:home}, {path:'/list',component:list} ] let router=new VueRouter({ routes:routes, linkActiveClass:'active' }); //默认加载第一个路径 router.push("/home"); let vm=new Vue({ el:"#app", methods:{ //编程时导航 goHome(){ //页面跳转，push是增加到历史管理 this.$router.history.push('/home') //go表示前进后退 //this.$router.history.go(-1) }, goList(){ this.$router.history.push('/list') //将当前历史管理替换成list //this.$router.history.replace('/list') } }, // 会在实例中提供两个属性this.$route(属性)，this.$router(方法); router:router, }) </script> </html>