VUE—从入门到飞起（五）
生活随笔
收集整理的這篇文章主要介紹了
VUE—从入门到飞起（五）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
路由
路由基本使用
路由規則中定義參數
路由嵌套
命名視圖實現經典布局
VUE—從入門到飛起（一）
VUE—從入門到飛起（二）
VUE—從入門到飛起（三）
VUE—從入門到飛起（四）
VUE—從入門到飛起（五）
路由
路由基本使用
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>路由基本使用</title><script src="../../../thirdlib/vue/vue.js"></script><script src="../../../thirdlib/vue/vue-router.min.js"></script><style>.myactive{color:red;font-weight: 800;font-style: italic;font-size: 40px;text-decoration: underline;background-color: green;}.v-enter,.v-leave-to{opacity: 0;transform: translateX(80px);}.v-enter-active,.v-leave-active{transition: all 0.5s ease;}</style></head><body><div id="app"><!--<a href="#/login">登錄</a><a href="#/register">注冊</a>--><!--router-link默認渲染了一個a標簽，可以用tag設置渲染的標簽--><router-link to="/login" tag="span">登錄</router-link><router-link to="/register">注冊</router-link><!--這是vue-router提供的元素， 專門用來做占位符的--><transition mode="out-in"><router-view></router-view></transition></div><script>var login = {template:"<h1>登錄組件</h1>"}var register = {template:"<h1>注冊組件</h1>"}//創建一個路由對象，當導入vue-router包之后，在window全局對象中有了一個構造函數，叫做VueRouter//在new路由對象的時候，可以為構造函數傳遞一個配置對象var routerobj = new VueRouter({routes:[//表示路由匹配規則//每個路由規則都是一個對象，這個規則對象都有兩個必須的屬性//屬性1是path，表示監聽哪個路由鏈接地址//屬性2是component，表示如果 路由是前面匹配到的path，表示展示component屬性對應的組件//注意：component屬性值必須是一個組件模板對象，不能是組件的引用名稱//{path : '/', component : login},{path : '/', redirect : '/login'},//重定向{path : '/login', component : login},{path : '/register', component : register}] ,linkActiveClass:'myactive'});var vm = new Vue({el:"#app",data:{},methods:{},router:routerobj//將路由規則對象注冊到vm實例上，用來監聽url地址})</script></body> </html>路由規則中定義參數
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>路由規則中定義參數</title><script src="../../../thirdlib/vue/vue.js"></script><script src="../../../thirdlib/vue/vue-router.min.js"></script></head><body><div id="app"><router-link to="/login?id=10&name=張三" tag="span">登錄</router-link><router-link to="/register/12/李四">注冊</router-link><router-view></router-view></div><script>var login = {template:"<h1>登錄組件 --- {{ $route.query.id }}{{ $route.query.name }}</h1>",created(){//組件生命周期鉤子console.log(this.$route.query.name);}}var register = {template:"<h1>注冊組件</h1>",created(){console.log(this.$route.params.id);console.log(this.$route.params.name);}}var routerobj = new VueRouter({routes:[{path : '/', redirect : '/login'},//重定向{path : '/login', component : login},{path : '/register/:id/:name', component : register}]});var vm = new Vue({el:"#app",data:{},methods:{},router:routerobj})</script></body> </html>路由嵌套
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>路由嵌套</title><script src="../../../thirdlib/vue/vue.js"></script><script src="../../../thirdlib/vue/vue-router.min.js"></script></head><body><div id="app"><router-link to="/account">account</router-link><router-view></router-view></div><template id="tmpl"><div><h1>這是account組件</h1><router-link to="/account/login">登錄</router-link><router-link to="/account/register">注冊</router-link><router-view></router-view></div></template><script>var account = {template:"#tmpl"}var login = {template:"<h3>登錄</h3>"}var register = {template:"<h3>注冊</h3>"}var router = new VueRouter({routes:[{path : '/account', component : account, children:[{path : 'login', component : login},{path : 'register', component : register}]} // {path : '/account/login', component : login}, // {path : '/account/register', component : register}]});var vm = new Vue({el:"#app",data:{},methods:{},router:router})</script></body> </html>命名視圖實現經典布局
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>命名視圖實現經典布局</title><script src="../../../thirdlib/vue/vue.js"></script><script src="../../../thirdlib/vue/vue-router.min.js"></script><style>html, body, h1{margin: 0;padding: 0;font-size: 20px;}.header{height: 80px;background-color: orange;}.container{display: flex;height: 600px;}.left{background-color: lightblue;flex: :2;}.main{background-color: lightcoral;flex: 8;}</style></head><body><div id="app"><router-view></router-view><div class="container"><router-view name="left"></router-view><router-view name="main"></router-view></div></div><script>var header = {template:'<h1 class="header">header頭部區域</h1>'}var left = {template:"<h1 class='left'>left區域</h1>"}var main = {template:"<h1 class='main'>main主體區</h1>"}var router = new VueRouter({routes:[{path : '/', components : {default:header,left : left,main:main}}/*{path : '/header', component : header}{path : '/left', component : left},{path : '/main', component : main}*/]});var vm = new Vue({el:"#app",data:{},methods:{},router:router})</script></body> </html>?
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的VUE—从入门到飞起（五）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VUE—从入门到飞起（四）
- 下一篇： 终于把单点登录完整流程图画明白了！史上最