ホームページ > 記事 > ウェブフロントエンド > vue-router コンポーネント間でパラメータを渡すためのメソッド
vue-router コンポーネント間でパラメータを渡すためのメソッド
- php中世界最好的语言オリジナル
- 2018-04-14 17:12:482311ブラウズ
今回は、vue-router コンポーネント間でパラメーターを渡す方法について説明します。vue-router コンポーネント間でパラメーターを渡すときの 注意事項 は何ですか? 以下は実際的なケースです。
VueRouterを使用してコンポーネント間のジャンプを実装します:パラメータ転送、具体的な内容は次のとおりです ログイン ---ユーザー名--->メイン ①送信者と受信者をクリアします ②受信者のルーティングアドレスを設定します{path:'/myTest',component:TestComponent}
-->
{path:'/myTest/:id',component:TestComponent}
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>
<p id="container">
<p>{{msg}}</p>
<!--指定容器 -->
<router-view></router-view>
</p>
<script>
//创建主页面组件
var myMain = Vue.component("main-component",{
//保存登录传递过来的数据
data:function(){
return {
uName:''
}
},
template:`
<p>
<h1>主页面用户名:{{uName}}</h1>
</p>
`,
//挂载该组件时自动拿到数据
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:`
<p>
<h1>登录页面</h1>
<input type="text" v-model="userInput" placeholder="请输入用户名">
<button @click="toMain">登录到主页面</button>
<br>
<router-link :to="'/main/'+userInput">登录到主页面</router-link>
</p>
`
})
var NotFound = Vue.component("not-found",{
template:`
<p>
<h1>404 Page Not Found</h1>
<router-link to="/login">返回登录页</router-link>
</p>
`
})
//配置路由词典
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></p>
<pre class="brush:php;toolbar:false"><!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>
<p id="container">
<p>{{msg}}</p>
<!-- -->
<router-view></router-view>
</p>
<script>
//创建产品列表组件
var myList = Vue.component("product-list",{
//保存产品列表的数据
data:function(){
return{
productList:["苹果","华为","三星","小米","vivo"]
}
},
template:`
<p>
<h4>这是列表页</h4>
<ul>
<li v-for="(tmp,index) in productList">
//将index传递过去
<router-link v-bind:to="'/detail/'+index">{{tmp}}</router-link>
</li>
</ul>
</p>
`
})
//详情页组件
var myDetail = Vue.component("product-detail",{
//保存传递过来的index
data:function(){
return{
myIndex:""
}
},
//在挂载完成后,将接收到的index赋值给myIndex
mounted:function(){
this.myIndex = this.$route.params.id;
},
template:`
<p>
<h4>这是详情页</h4>
<p>这是id为：{{myIndex}}的产品</p>
</p>
`
})
//页面找不到的时候
var NotFound = Vue.component("not-found",{
template:`
<p>
<h1>404 Page Not Found</h1>
</p>
`
})
// 配置路由词典
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> この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
mint-uiloadmore プルアップの読み込みとプルダウンの更新の間の競合を処理する方法
WeChat アプレットがサーバーに写真をアップロードする方法
以上がvue-router コンポーネント間でパラメータを渡すためのメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。