溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文章向大家介紹使用vue-router怎么實現一個組件間跳轉功能，主要包括使用vue-router怎么實現一個組件間跳轉功能的使用實例、應用技巧、基本知識點總結和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下。
Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。
login ---用戶名--->main
①明確發送方和接收方
②配置接收方的路由地址
{path:'/myTest',component:TestComponent}
-->
{path:'/myTest/:id',component:TestComponent}
③接收方獲取傳遞來的數據
this.$route.params.id
④跳轉的時候，發送參數
this.$router.push('/myTest/20')
<router-link :to="'/myTest'+id">跳轉</router-link>
代碼：
<!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>{{msg}}</p>
<!--指定容器 -->
<router-view></router-view>
</div>
<script>
//創建主頁面組件
var myMain = Vue.component("main-component",{
//保存登錄傳遞過來的數據
data:function(){
return {
uName:''
}
},
template:`
<div>
<h2>主頁面用戶名:{{uName}}</h2>
</div>
`,
//掛載該組件時自動拿到數據
beforeMount:function(){
//接收參數
console.log(this.$route.params);
this.uName = this.$route.params.myName ;
}
})
//創建登錄頁面組件
var myLogin = Vue.component("login-component",{
//保存用戶輸入的數據
data:function(){
return {
userInput:""
}
},
methods:{
toMain:function(){
//跳轉到主頁面，并將用戶輸入的名字發送過去
this.$router.push("/main/"+this.userInput);
console.log(this.userInput);
}
},
template:`
<div>
<h2>登錄頁面</h2>
<input type="text" v-model="userInput" placeholder="請輸入用戶名">
<button @click="toMain">登錄到主頁面</button>
<br>
<router-link :to="'/main/'+userInput">登錄到主頁面</router-link>
</div>
`
})
var NotFound = Vue.component("not-found",{
template:`
<div>
<h2>404 Page Not Found</h2>
<router-link to="/login">返回登錄頁</router-link>
</div>
`
})
//配置路由詞典
const myRoutes = [
{path:"",component:myLogin},
{path:"/login",component:myLogin},
//注意冒號,不用/否則會當成地址
{path:"/main/:myName",component:myMain},
//沒有匹配到任何頁面則跳轉到notfound頁面
{path:"*",component:NotFound}
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
// 注意,路由地址
</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>{{msg}}</p>
<!-- -->
<router-view></router-view>
</div>
<script>
//創建產品列表組件
var myList = Vue.component("product-list",{
//保存產品列表的數據
data:function(){
return{
productList:["蘋果","華為","三星","小米","vivo"]
}
},
template:`
<div>
<h5>這是列表頁</h5>
<ul>
<li v-for="(tmp,index) in productList">
//將index傳遞過去
<router-link v-bind:to="'/detail/'+index">{{tmp}}</router-link>
</li>
</ul>
</div>
`
})
//詳情頁組件
var myDetail = Vue.component("product-detail",{
//保存傳遞過來的index
data:function(){
return{
myIndex:""
}
},
//在掛載完成后,將接收到的index賦值給myIndex
mounted:function(){
this.myIndex = this.$route.params.id;
},
template:`
<div>
<h5>這是詳情頁</h5>
<p>這是id為：{{myIndex}}的產品</p>
</div>
`
})
//頁面找不到的時候
var NotFound = Vue.component("not-found",{
template:`
<div>
<h2>404 Page Not Found</h2>
</div>
`
})
// 配置路由詞典
const myRoutes = [
{path:"",component:myList},
{path:"/list",component:myList},
{path:"/detail/:id",component:myDetail},
{path:"*",component:NotFound},
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>到此這篇關于使用vue-router怎么實現一個組件間跳轉功能的文章就介紹到這了，更多相關的內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
