vue之動態路由和get傳值
阿新 • • 發佈:2018-12-26
vue之不同路由傳值的兩種方法:動態路由和get傳值
一、動態路由
1.步驟:
1.1 配置動態路由
const routes = [
{ path:'/home',component:Home},
{ path:'/news',component:News},
// 動態路徑引數,以冒號開頭;
{ path:'/content/:aid',component:Content},
{ path:'*',redirect:'/home'},
];
1.2 在對應的頁面通過 this.$route.params 獲取動態路由的值
<script> export default { data(){ return { msg:"詳情" } }, mounted() { console.log(this.$route.params); } } </script>
2.例項演示
2.1 在main.js中配置動態路由
//2.配置路由 const routes = [ { path:'/home',component:Home}, { path:'/news',component:News}, { path:'/content/:aid',component:Content}, { path:'*',redirect:'/home'}, ];
2.2 在news.vue中的連結路由
<template> <div> 新聞元件 <br> <button @click="emitHome()">給home元件廣播資料</button> <hr /> <ul> <li v-for="(item,key) in list"> <router-link :to="'/content/'+key">{{ item }}</router-link> </li> </ul> </div> </template>
2.3 在Content.vue中,通過mounted來測試獲取的aid
<script> export default { data(){ return { msg:"詳情" } }, mounted() { console.log(this.$route.params); } } </script>
2.4 結果
二、get傳值
1.步驟:
1.1 在main.js檔案中配置路由
和普通路由配置一樣。
const routes = [
{ path:'/pcontent',component:Pcontent},
];
1.2 在home.vue檔案中連結路由
<ul> <li v-for="(item,key) in list">
//通過get方式進行傳值 <router-link :to="'/pcontent?aid='+key">{{item}}</router-link> </li> </ul>
1.3 在pcontent.vue中的 mounted 通過 this.$route.query來獲取傳入的物件
mounted() {
this.msg=this.$route.query.aid
}
2. 例項演示
2.1 在main檔案中配置路由
//1.建立元件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';
//2.配置路由
const routes = [
{ path:'/home',component:Home},
{ path:'/news',component:News},
{ path:'/content/:aid',component:Content},
{ path:'/pcontent',component:Pcontent},
{ path:'*',redirect:'/home'},
];
2.2 在home.vue檔案中連結路由
<template> <div> 首頁元件 <br> <button @click="emitNews()">給news元件廣播資料</button> <hr /> <ul> <li v-for="(item,key) in list"> <router-link :to="'/pcontent?aid='+key">{{item}}</router-link> </li> </ul> </div> </template>
2.3 在pcontent.vue元件中獲取值
<template> <div> 我是商品{{msg}} </div> </template> <script> export default { data(){ return { msg:"" } }, mounted() { this.msg=this.$route.query.aid } } </script>
2.4 結果