vue學習:7、路由跳轉

2019獨角獸企業重金招聘Python工程師標準>>> hot3.png

    <body><div id="app"></div></body><script type="text/javascript">var Login = {template: `<div>我是登陸界面</div>`};var Register = {template: `<div>我是注冊界面</div>`};<!-- 2:按照插件 -->Vue.use(VueRouter);<!-- 3:創建路由對象 -->var router = new VueRouter({<!-- 4:配置路由對象 -->routes: [{ name:'login', 	path: '/login',		component: Login}, { name:'register',	path: '/register',	component: Register	}]});<!-- 6:指定路由改變局部的位置 -->var App = {template: `<div><!-- vue-router內置組件 --><!-- <router-link to="/login">登錄去</router-link><router-link to="/register">注冊去</router-link> --><!-- to 前沒有冒號 就字符串處理了 --><router-link :to="{name:'login'}">登錄去</router-link><router-link :to="{name:'register'}">注冊去</router-link><!-- 顯示跳轉頁面 --><router-view></router-view></div>`}new Vue({el: '#app',router: router,components: {app: App},template: '<app/>'})</script>

傳參與嵌套

    <body><div id="app"></div></body><script type="text/javascript">// 1: router-view 中包含 router-view// 2: 路由規則中存在子路由var Login = {template: `<div>這里是Login界面,下面是子界面<hr><!-- 顯示跳轉頁面 --><router-view></router-view></div>`,created: function() {console.log(this.$route.query);console.log(this.$route.query.id + ' ' + this.$route.query.name);}};var Register = {template: `<div>我是注冊界面</div>`,created: function() {console.log(this.$route.params);console.log(this.$route.params.name);}};var Woman={template:`<div>女的</div>`}var Man={template:`<div>男的</div>`}var Boy={template:`<div>小屁孩</div>`}<!-- 2:按照插件 -->Vue.use(VueRouter);<!-- 3:創建路由對象 -->var router = new VueRouter({<!-- 4:配置路由對象 -->routes: [{<!--保證 /login 顯示login組件  -->name: 'login',path: '/login',component: Login,<!-- 保證/login/abc 顯示abc -->children:[{name: 'login.woman',path: 'woman',component: Woman},{name: 'login.man',path: 'man',component: Man},{name: 'login.boy',path: 'boy',component: Boy}]},{name: 'register',path: '/register/:name',component: Register}]});<!-- 6:指定路由改變局部的位置 -->var App = {template: `<div><!-- vue-router內置組件 --><!-- <router-link to="/login">登錄去</router-link><router-link to="/register">注冊去</router-link> --><!-- to 前沒有冒號 就字符串處理了  --><!-- query:{id:1} --><!-- params:{name:'abc'} --><router-link :to="{name:'login.woman'}" >女</router-link><router-link :to="{name:'login.man'}" >男</router-link><router-link :to="{name:'login.boy'}" >小屁孩</router-link><router-link :to="{name:'login',query:{id:1,name:'ddd'}}" >登錄去</router-link><router-link :to="{name:'register',params:{name:'abc'}} "  >注冊去</router-link><!-- 顯示跳轉頁面 --><router-view></router-view></div>`}new Vue({el: '#app',router: router,components: {app: App},template: '<app/>'})</script>

?

轉載于:https://my.oschina.net/qingqingdego/blog/2873891

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/450270.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/450270.shtml
英文地址,請注明出處:http://en.pswp.cn/news/450270.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Spring Retry 重試機制實現及原理

概要 Spring實現了一套重試機制&#xff0c;功能簡單實用。Spring Retry是從Spring Batch獨立出來的一個功能&#xff0c;已經廣泛應用于Spring Batch,Spring Integration, Spring for Apache Hadoop等Spring項目。本文將講述如何使用Spring Retry及其實現原理。 背景 重試&…

inline 內聯函數詳解 內聯函數與宏定義的區別

一、在C&C中   一、inline 關鍵字用來定義一個類的內聯函數&#xff0c;引入它的主要原因是用它替代C中表達式形式的宏定義。表達式形式的宏定義一例&#xff1a;#define ExpressionName(Var1,Var2) ((Var1)(Var2))*((Var1)-(Var2))為什么要取代這種形式呢&#xff0c;且…

Oracle序列更新為主鍵最大值

我們在使用 Oracle 數據庫的時候&#xff0c;有時候會選擇使用自增序列作為主鍵。但是在開發過程中往往會遇到一些不規范的操作&#xff0c;導致表的主鍵值不是使用序列插入的。這樣在數據移植的時候就會出現各種各樣的問題。當然數據庫主鍵不使用序列是一種很好的方式&#xf…

dubbo forbid service的解決辦法

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 017-05-31 10:36:54.523 [http-nio-8080-exec-5] ERROR c.h.pdl.web.APIExceptionHandler - Unknown Exception, URI /payday-loan-co…

用SSH登錄遠程的機器,在遠程機器上執行本地機器上的腳本

假設本地的機器IP為10.245.111.90&#xff0c;我們想要在10.245.111.93上執行一個保存在10.245.111.90上的腳本。經過測試通過的命令如下&#xff1a;ssh root10.245.111.93 bash -s < /root/testlocal.sh如果要帶參數的話&#xff0c;那就需要參考這篇文章中描述的代碼了。…

golang學習之旅(1)

這段時間我開始了golang語言學習&#xff0c;其實也是為了個人的職業發展的拓展和衍生&#xff0c;語言只是工具&#xff0c;但是每個語言由于各自的特點和優勢&#xff0c;golang對于當前編程語言的環境&#xff0c;是相對比較新的語言&#xff0c;對于區塊鏈&#xff0c;大數…

為什么要在Linux平臺上學C語言?用Windows學C語言不好嗎?

用Windows還真的是學不好C語言。C語言是一種面向底層的編程語言&#xff0c;要寫好C程序&#xff0c;必須對操作系統的工作原理非常清楚&#xff0c;因為操作系統也是用C寫的&#xff0c;我們用C寫應用程序直接使用操作系統提供的接口&#xff0c;Linux是一種開源的操作系統&am…

數據庫中Schema(模式)概念的理解

在學習SQL的過程中&#xff0c;會遇到一個讓你迷糊的Schema的概念。實際上&#xff0c;schema就是數據庫對象的集合&#xff0c;這個集合包含了各種對象如&#xff1a;表、視圖、存儲過程、索引等。為了區分不同的集合&#xff0c;就需要給不同的集合起不同的名字&#xff0c;默…

linux系統中打rz命令后出現waiting to receive.**B0100000023be50

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 linux系統中打rz命令后出現 waiting to receive.**B0100000023be50 而沒有出現選擇文件彈出框是什么問題&#xff1a; 我本來用的是 gi…

golang學習之旅(2)- go的數據基本數據類型及變量定義方式

叮鈴鈴&#xff0c;這不有人在評論問下一篇何時更新&#xff0c;這不就來了嘛&#xff0c;&#x1f604; 今天我們說說golang 的基本數據類型 基本類型如下&#xff1a; //基本類型 布爾類型&#xff1a;bool 即true 、flase 類似于java中的boolean 字符類型&#xff1a;s…

StackExchange.Redis 官方文檔(六) PipelinesMultiplexers

流水線和復用 糟糕的時間浪費。現代的計算機以驚人的速度產生大量的數據&#xff0c;而且高速網絡通道(通常在重要的服務器之間同時存在多個鏈路)提供了很高的帶寬&#xff0c;但是計算機花費了大量的時間在 等待數據 上面&#xff0c;這也是造成使用持久性鏈接的編程方式越來越…

開發優秀產品的六大秘訣

摘要&#xff1a;本文是Totango的聯合創始人兼公司CEO Guy Nirpaz發表在Mashable.com上的文章。無論是在哪個行業&#xff0c;用戶永遠是一款產品的中心&#xff0c;本文作者就以用戶為中心&#xff0c;為大家講述了六個如何為企業產品添加功能的秘訣。 隨著云計算的發展&#…

Spring Boot下無法加載主類 org.apache.maven.wrapper.MavenWrapperMain問題解決

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 引言&#xff1a; 在SpringBoot中需要使用mvnw來做相關操作&#xff0c;但是卻有時候會報出達不到MavenWrapperMain的錯誤信息&#xff…

【前端面試】字節跳動2019校招面經 - 前端開發崗(二)

【前端面試】字節跳動2019校招面經 - 前端開發崗&#xff08;二&#xff09; 因為之前的一篇篇幅有限&#xff0c;太長了看著也不舒服&#xff0c;所以還是另起一篇吧?一、 jQuery和Vue的區別 jQuery 輕量級Javascript庫Vue 漸進式Javascript-MVVM框架jQuery和Vue的對比 jQuer…

SpringBoot與SpringCloud的版本說明及對應關系

轉載原文地址&#xff1a;https://github.com/alibaba/spring-cloud-alibaba/wiki/%E7%89%88%E6%9C%AC%E8%AF%B4%E6%98%8E

leetcode 8: 字符串轉整數(atoi)

實現 atoi&#xff0c;將字符串轉為整數。 該函數首先根據需要丟棄任意多的空格字符&#xff0c;直到找到第一個非空格字符為止。如果第一個非空字符是正號或負號&#xff0c;選取該符號&#xff0c;并將其與后面盡可能多的連續的數字組合起來&#xff0c;這部分字符即為整數的…

優秀產品頁設計:將訪問者轉化成客戶

摘要&#xff1a;本文是對外文《 Better Product Pages: Turn Visitors Into Customers 》的翻譯&#xff0c;編譯內容如下&#xff1a; 展示產品、服務的方法是其獲得成功的關鍵。在Web上&#xff0c;你留給用戶的第一印象是至關重要的。 如果有人訪問你的網站&#xff0c;一定…

計算機網絡學習方法

原文見&#xff1a;http://blog.csdn.net/qq_33506160/article/details/51872708 一、網絡課程究竟難在哪&#xff1f; 1&#xff0e;內容比較亂 如果把《計算機網絡技術基礎》看做是一本計算機網絡導論方面的教材&#xff0c;就不會認為亂了&#xff0c;因為導論就是為了解決知…

小程序類似抖音視頻整屏切換

更新 現在已經更新了github地址和效果gif&#xff0c;可在文章最后查看。如果我的代碼對你有用&#xff0c;請幫我隨手star一下。 需求 最近在項目中需要加一個功能&#xff0c;在小程序中將已有的短視頻功能&#xff0c;按照抖音的方式來瀏覽&#xff0c;整屏&#xff0c;可上…

Coding For Fun 32小時:充滿創造、激情、團結的編程馬拉松

摘要&#xff1a;Coding for Fun大賽是2012中國軟件開發者大會&#xff08;SDCC&#xff09;的重要環節。由六名黑馬學員組成的“天翼二隊”&#xff0c;經過32小時的“血拼”&#xff0c;憑大賽作品“語音控”&#xff0c;獲得了本次大賽的“最佳設計獎”。本文是該隊隊員的參…