vue路由傳參的方式
『壹』 vue路由中怎麼傳入數據
。。。。
『貳』 vue router 傳遞參數 少一個參數怎麼就不顯示了
首先在app.vue裡面有這么來一段自然後你所點擊的按鈕其實是這個東西，這個其實就是個封裝完的a標簽你在router裡面配置完了相關路由之後就能在點擊這個按鈕的時候將router-view標簽裡面的組件替換掉了
『叄』 vue.js路由的參數怎麼傳遞
帶上params或者query
用route.params 或者route.query接收
可以帶對象類型的 params 沒有成功試過。。。。。
『肆』 關於vue-router接收參數
Vue Router params 參數接收為空-簡書
path 和 params 傳參,B.vue 中 this.$route.params 接收為空 A.vue let ...this.$route.params 正常接受參數 ...
簡書2018-12-18。第一種：內get方法接收值this.$route.query.name，第二種：post方法this.$route.params.name （在頁面刷容新的時候就會消失）第三種：路由方法props:{name:{required:false,default:''}} （頁面刷新不消失，可以在路由配置中設置參數）。另外： 如果在鏈接上設置 replace 屬性，當點擊時，會調用 router.replace() 而不是 router.push()，於是瀏覽器不會留下 history 記錄。
『伍』 vue路由怎麼傳參router-link傳參
一個簡單的小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script src="./vue-router.min.js"></script>
</head>
<body>
<div id="app">
<!--to 表示要跳到哪個url裡面-->
<router-link to="/cici">Cici</router-link>
<router-link to="/0725">0725</router-link>
<!-- 這里不需要寫-->
<router-view></router-view>
</div>
</body>
</html>
<script>
//路由的作用就是切換頁面的跳轉
//這里是沒有s的
// var cici = Vue.extend({
// template: '<div>CICI板塊</div>'
// })
// var C0725 = Vue.extend({
// template: '<div>0725板塊</div>'
// })
// 可以簡寫成這個樣
var cici = {
template: '<div>CICI板塊</div>'
}
var C0725 = {
template: '<div>0725板塊</div>'
}
//創建路由,注冊好配置,和跳轉
var router = new VueRouter({
routes: [{
path: '/cici',
component: cici //傳入的是一個對象
},
{
path: '/0725',
component: C0725 //傳入的是一個對象
}
]
})
var vm = new Vue({
el: "#app",
router: router
})
</script>
『陸』 vue this.router 怎麼傳遞參數
主要有以下幾個步驟：
（1） 設置好路由配置
router.map({
'/history/:deviceId/:dataId': {
name: 'history', // give the route a name
component: { ... }
}
})
這里有2個關鍵點：
a）給該路由命名，也就是上文中的 name: 'history',
b）在路徑中要使用在路徑中使用冒號開頭的數字來接受參數，也就是上文中的 :deviceId, :dataId；
（2）在v-link中傳遞參數；
<a v-link="{ name: 'history', params: { deviceId: 123, dataId:456 }}">history</a>
這里的123，456都可以改用變數。
比如該template所對應的組件有2個變數定義如下：
data: function() {
return {
deviceId:123,
dataId:456
}
}
此時上面那個v-link可以改寫為：
<a v-link="{ name: 'history', params: { deviceId: deviceId, dataId: dataId }}">history</a>
（3）在router的目標組件上獲取入參
比如在router目標組件的ready函數中可以這么使用。
ready: function(){
console.log('deviceid: ' + this.$route.params.deviceId);
console.log('dataId: ' + this.$route.params.dataId);
}
『柒』 vue路由傳參刷新無數據怎麼處理
可以使用keep-alive緩存頁面：具體做法是：可在App.vue中
<keep-alive :include="includePages">
<router-view id="app"></router-view>
</keep-alive>
includePages：對應一個數組，裡面是要緩存的頁面的name，即是.VUE文件中：
export default {
name: 'xxx',
這里的XXX
『捌』 vue-router怎麼給子路由傳參
路由傳參數。在很多時候我們需要路由上面傳遞參數，比如新聞列表頁，我們需要傳遞新聞ID，給新聞詳細頁。
1.新聞列表頁模板
<template id="news">
<div>
<h2>新聞列表</h2>
<ul>
<li>
<router-link to="/news/001">新聞001</router-link>
</li>
<li>
<router-link to="/news/002">新聞002</router-link>
</li>
</ul>
</div>
</template>
我們訪問/news/001，跳轉到新聞詳細頁，展示001的這條新聞。
2.新聞詳細頁組件准備
<template id="NewsDetail">
<div>
新聞詳細頁面
<span>{{$route.params.id}}</span>
</div>
</template>123456123456
$route.params.id獲取路由上的參數
在js里定義路由組件：
//新聞詳細頁組件
const NewsDetail = { template: '#NewsDetail' };1212
3.定義路由，增加一個路由
{ path: '/news/:id', component: NewsDetail },11
訪問/news/001或者/news/002就展示新聞詳細頁
4.全部代碼如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="box">
<p>
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
</p>
<router-view></router-view>
</div>
<!-- 模板抽離出來 -->
<template id="home">
<!-- 注意：組件只能有一個根元素，所以我們包裝到這個div中 -->
<div>
<h2>首頁</h2>
<router-link to="/home/login">登錄</router-link>
<router-link to="/home/reg">注冊</router-link>
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>
</template>
<template id="news">
<div>
<h2>新聞列表</h2>
<ul>
<li>
<router-link to="/news/001">新聞001</router-link>
</li>
<li>
<router-link to="/news/002">新聞002</router-link>
</li>
</ul>
</div>
</template>
<template id="login">
<div>登錄界面</div>
</template>
<template id="reg">
<div>注冊界面</div>
</template>
<template id="NewsDetail">
<div>
新聞詳細頁面
<span>{{$route.params.id}}</span>
</div>
</template>
<script type="text/javascript">
// 1. 定義（路由）組件。
const Home = { template: '#home' };
const News = { template: '#news' };
const Login = { template: '#login' };
const Reg = { template: '#reg' };
//新聞詳細頁組件
const NewsDetail = { template: '#NewsDetail' };
// 2. 定義路由
const routes = [
{ path: '/', redirect: '/home' },
{
path: '/home',
component: Home,
children:[
{ path: '/home/login', component: Login},
{ path: '/home/reg', component: Reg}
]
},
{ path: '/news', component: News,},
{ path: '/news/:id', component: NewsDetail },
]
// 3. 創建 router 實例，然後傳 `routes` 配置
const router = new VueRouter({
routes // （縮寫）相當於 routes: routes
})
// 4. 創建和掛載根實例。
// 記得要通過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
router
}).$mount('#box')
// 現在，應用已經啟動了！
</script>
</body>
</html>
『玖』 vue2.0路由後面的參數怎麼在頁面中傳遞
可以通過vuex完成組件之間的傳參，包括數組對象等，這也是作者建議的做法，構建大版型項目管理的狀權態過多不可能都通過url的方式傳遞參數的。 用了vue-router就是單頁app,頁面都沒刷新過，你把變數放在 window. 所有組件都能訪問得到。