Vue路由
手动路由
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <router-link :to="{name: 'home'}">首页</router-link> <router-link :to="{name: 'login'}">登录</router-link> <router-link to="/user/chenrun?age=18">用户信息</router-link> <router-view></router-view> </div> <template id="home"> <div> <h1>这是首页</h1> <router-link to="/chenrun">陈润</router-link> <router-link to="/penghuixian">彭慧娴</router-link> <router-view></router-view> <button @click="my_click">点击跳转的用户信息</button> </div> </template> <template id="login"> <div> <h1>这是登录</h1> </div> </template> <template id="user"> <div> <h1>这里是用户信息</h1> <p>用户名: {{$route.params.username}}</p> <p>年龄: {{$route.query.age}}</p> <button @click="my_click">点击跳转到首页</button> </div> </template> <template id="chenrun"> <div> <h1>陈润</h1> </div> </template> <template id="penghuixian"> <div> <h1> 彭慧娴 </h1> </div> </template> <script> let url = [ { path: "/", name: "home", redirect: "/chenrun", component: { template: "#home", methods: { my_click: function() { this.$router.push({name: "user", params: {username: "chenrun"}, query: {age: 18}}) } } }, children: [ { path: "/chenrun", component: { template: "#chenrun", } }, { path: "/penghuixian", component: { template: "#penghuixian" } } ] }, { path: "/login", name: "login", component: { template: "#login" } }, { path: "/user/:username", name: "user", component: { template: "#user", methods: { my_click: function () { //跳转到用户页面 this.$router.push({name: "home"}) } } }, } ]; let router = new VueRouter({ routes: url }); const app = new Vue({ el: "#app", router: router, mounted() { console.log(this.$route); console.log(this.$router) } }) </script> </body> </html>
路由的钩子(beforeEach, afterEach, meta)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <router-link :to="{name: 'home'}">首页</router-link> <router-link :to="{name: 'login'}">登录</router-link> <router-link to="/user/chenrun?age=18">用户信息</router-link> <router-view></router-view> </div> <template id="home"> <div> <h1>这是首页</h1> <router-link to="/chenrun">陈润</router-link> <router-link to="/penghuixian">彭慧娴</router-link> <router-view></router-view> <button @click="my_click">点击跳转的用户信息</button> </div> </template> <template id="login"> <div> <h1>这是登录</h1> </div> </template> <template id="user"> <div> <h1>这里是用户信息</h1> <p>用户名: {{$route.params.username}}</p> <p>年龄: {{$route.query.age}}</p> <button @click="my_click">点击跳转到首页</button> </div> </template> <template id="chenrun"> <div> <h1>陈润</h1> </div> </template> <template id="penghuixian"> <div> <h1> 彭慧娴 </h1> </div> </template> <script> let url = [ { path: "/", name: "home", redirect: "/chenrun", meta: { required_login: true }, component: { template: "#home", methods: { my_click: function() { this.$router.push({name: "user", params: {username: "chenrun"}, query: {age: 18}}) } } }, children: [ { path: "/chenrun", meta: { required_login: true }, component: { template: "#chenrun", } }, { path: "/penghuixian", component: { template: "#penghuixian" } } ] }, { path: "/login", name: "login", component: { template: "#login" } }, { path: "/user/:username", name: "user", component: { template: "#user", methods: { my_click: function () { //跳转到用户页面 this.$router.push({name: "home"}) } } }, } ]; let router = new VueRouter({ routes: url }); //路由的钩子 router.beforeEach(function(to, from, next){ console.log(to); console.log(from); if (to.meta.required_login){ next("/login") }else{ next() } }); router.afterEach(function(to, from){ console.log(to); console.log(from) }); const app = new Vue({ el: "#app", router: router, mounted() { // console.log(this.$route); // console.log(this.$router) } }) </script> </body> </html>
命名的路由视图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <router-link :to="{name: 'home'}">首页</router-link> <router-link :to="{name: 'login'}">登录</router-link> <router-view name="my_header"></router-view> <router-view name="my_footer"></router-view> <router-view></router-view> </div> <template id="header"> <div> <h1>这是头</h1> </div> </template> <template id="footer"> <div> <h1>这是脚</h1> </div> </template> <template id="login"> <div> <h1>登录</h1> </div> </template> <script> let url = [ { path: "/", name: "home", components: { my_header: { template: "#header", }, my_footer: { template: "#footer" } } }, { path: "/login", name: "login", component: { template: "#login" } } ]; let router = new VueRouter({ routes: url }); const app = new Vue({ el: "#app", router: router }) </script> </body> </html>
