<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/">首页</router-link> <router-link to="/course/1?age=2">课程页面</router-link> <router-view></router-view> </div> <script> let url = [ { path: "/", name: "home", component: { template: `<div><h1>这是首页</h1></div>` } }, { path: "/course/:id", redirect: {name: "home"}, meta: { required_login: true }, component: { template: `<div><h1>这是课程页面</h1></div>` } } ]; let router = new VueRouter({ routes: url }); router.beforeEach(function (to, from, next) { // to 你要去哪 // from 你从哪里来 // next() 你要做什么 // console.log(to) // console.log(from) // console.log(next) next() }); router.afterEach(function (to, from) { // to 你要去哪 // from 你从哪里来 console.log(to) console.log(from) }); const app = new Vue({ el: "#app", router: router, mounted(){ console.log(this.$route.meta); console.log(this.$router); // if(this.$route.meta.required_login){ // // this.$router.push("/") // this.$router.push({name: "home", params: {id: 1}, query: {}}) // } } }) </script> </body> </html>