四、通過vuerouter來實現元件之間的跳**引數的傳遞
login ---使用者名稱--->main
①明確傳送方和接收方
②配置接收方的路由位址
-->
③接收方獲取傳遞來的資料
this.$route.params.id
④跳轉的時候，傳送引數
this.$router.push('/mytest/20')
跳轉
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>傳參
title
>
<
script
src="js/vue.js"
>
script
>
<
script
src="js/vue-router.js"
>
script
>
head
>
<
body
>
<
div
id="container"
>
<
p>}
p>
<
router-view
>
router-view
>
div>
<
script
>
//建立主頁面元件
varmymain
=vue.component(
"main-component",
},template:`
<
div>
<
h1>
主頁面使用者名稱:}
<
/h1>
<
/div>
`,
//掛載該元件時自動拿到資料
beforemount:
function
() })
//建立登入頁面元件
varmylogin
=vue.component(
"login-component",
},methods:
},template:`
<
div>
<
h1>
登入頁面
<
/h1>
<
input type="
text"v
-model="
userinput
"placeholder="
請輸入使用者名稱
">
<
button @click="
tomain
">
登入到主頁面
<
/button>
<
br>
<
router
-link :to="
'/main/'+userinput
">
登入到主頁面
<
/router-link>
<
/div>
` })
varnotfound
=vue.component(
"not-found",)
//配置路由詞典
const myroutes =[,,
//注意冒號,不用/否則會當成位址
,
//沒有匹配到任何頁面則跳轉到notfound頁面
]const myrouter
=new
vuerouter()
newvue(
})//注意,路由位址
script
>
body
>
html
>
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>傳參練習
title
>
<
script
src="js/vue.js"
>
script
>
<
script
src="js/vue-router.js"
>
script
>
head
>
<
body
>
<
div
id="container"
>
<
p>}
p>
<
router-view
>
router-view
>
div>
<
script
>
//建立產品列表元件
varmylist
=vue.component(
"product-list",
},template:`
<
div>
<
h4>
這是列表頁
<
/h4>
<
ul>
<
li v
-for="
(tmp,index) in productlist
">
//將index傳遞過去
<
router
-link v
-bind:to="
'/detail/'+index
">
}<
/router-link>
<
/li>
<
/ul>
<
/div>
` })
//詳情頁元件
varmydetail
=vue.component(
"product-detail",
},//在掛載完成後,將接收到的index賦值給myindex
mounted:
function
(), template:`
<
div>
<
h4>
這是詳情頁
<
/h4>
<
p>
這是id為：}的產品
<
/p>
<
/div>
` })
//頁面找不到的時候
varnotfound
=vue.component(
"not-found",)
//配置路由詞典
const myroutes =[,,
,,
]const myrouter
=new
vuerouter()
newvue(
})script
>
body
>
html
>
VueRouter 元件復用
在使用路由引數時，比如從 our xsan 跳轉到 our foo 原來的元件例項會被復用。因為這兩個路由都是渲染的同乙個元件，比起銷毀再重建，復用則顯得更加高效。不過，這也就意味著元件的生命週期鉤子函式將不會被再次呼叫。1 監聽 this.route 屬性。通過判斷 to 和 from 來獲取更新...
vue router的元件傳值
路由傳參都會涉及到路由配置項中的props 正常情況下的傳參通過在路由表中定義 屬性,在路由表對應的component中用 route.params.屬性接收.這種傳值方式有乙個弊端,就是 route和路由形成了耦合,讓元件只能在特定的路由上使用.如下,user元件的 route.params.id...
vue router 路由和元件
vue router 是 vue 中需要學習的乙個重要部分,下面我來與大家分享下自己的經驗 v model currentid fixed id home slot icon src currentid home 首頁mt tab item id discover slot icon src cur...