簡述
由於需要使用到路由傳遞參數,所以查到一些VUE傳遞參數的幾種方法,文章里總結了六種.
具體的文檔可以去官方文檔上查看.但是我讀下來有一個體會 : 示例有些少.描述的比較精簡.
以下貼出代碼並有簡要的概述.從代碼的角度去描述使用VUE傳遞參數的幾種方法.
代碼可以直接粘貼到本地環境中進行查看與調試,方便直觀的查看效果.
推薦閱讀VUE官方文檔:路由組件傳參
代碼
方式一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view>
</router-view>
</div>
<script>
// ******************************
// Vue Version: 2.6.11
// Vue-router Version : 3.4.3
// 時間 : 2020 / 08 / 17
// @tanplay.com
// ******************************
/*
接收參數的第一種方式
*/
const Foo = {
template: '<div>路由傳遞的參數是:{{$route.name}}</div>', // 通過$route接收
}
const Bar = {
template: '<div>路由傳遞的參數是:{{$route.name}}</div>',
}
const routes = [
{ path: '/foo', component: Foo, name: "Foo" }, // 傳遞的name的值是這里的值
{ path: '/bar', component: Bar, name: "Bar" },
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
</script>
</body>
</html>
$route包含了當前路由的一些可讀信息.可以通過$route.name動態的獲取到當前路由的name值.
方式二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link :to="{name:'Foo',params:{id:'testid',username:'hello'}}">Go to Foo</router-link>
<router-link :to="{name:'Bar',query:{id:'notallowsend',username:'band'}}">Go to Bar</router-link>
</p>
<router-view>
</router-view>
</div>
<script>
// ******************************
// Vue Version: 2.6.11
// Vue-router Version : 3.4.3
// 時間 : 2020 / 08 / 17
// @tanplay.com
// ******************************
/*
接收參數的第一種方式
*/
const Foo = {
template: '<div>Foo接收到路由傳遞的參數是:{{$route.params.id}} / {{$route.params.username}}</div>', // 通過$route接收
}
const Bar = {
template: '<div>Bar接收到的路由傳遞的參數是:{{$route.query.id}} / {{$route.query.username}}</div>',
}
const routes = [
{ path: '/foo', component: Foo, name: "Foo" }, // 傳遞的name的值是這里的值
{ path: '/bar', component: Bar, name: "Bar" },
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
</script>
</body>
</html>
通過router-link標簽綁定路由的name值,並使用 params | query進行傳遞參數.並在路由的組件中使用$route.params | $route.query接收參數.傳遞要與接收的key一致.
方式三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/foo/hello">Go to Foo</router-link>
<router-link to="/bar/sayhi">Go to Bar</router-link>
</p>
<router-view>
</router-view>
</div>
<script>
// ******************************
// Vue Version: 2.6.11
// Vue-router Version : 3.4.3
// 時間 : 2020 / 08 / 17
// @tanplay.com
// ******************************
/*
通過URL傳遞參數
*/
const Foo = {
template: '<div>Foo接收到路由傳遞的參數是:{{$route.params.respects}}</div>', // 通過$route接收
}
const Bar = {
template: '<div>Bar接收到的路由傳遞的參數是:{{$route.params.respects}}</div>',
}
const routes = [
{ path: '/foo/:respects', component: Foo, name: "Foo" }, // 傳遞的name的值是這里的值 => respects
{ path: '/bar/:respects', component: Bar, name: "Bar" },
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
</script>
</body>
</html>
通過路由發送參數,並使用 $route.params接收參數
方式四
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/foo/123">Go to Foo</router-link>
<router-link to="/bar/345">Go to Bar</router-link>
</p>
<router-view>
</router-view>
</div>
<script>
// ******************************
// Vue Version: 2.6.11
// Vue-router Version : 3.4.3
// 時間 : 2020 / 08 / 17
// @tanplay.com
// ******************************
/*
通過URL傳遞參數
*/
const Foo = {
props: ['id'],
template: '<div>Foo接收到路由傳遞的參數是:{{$route.params.id}} / {{id}}</div>', // 通過$route接收
}
const Bar = {
props: ['id'],
template: '<div>Bar接收到的路由傳遞的參數是:{{$route.params.id}} / {{id}}</div>',
}
const routes = [
{ path: '/foo/:id', component: Foo, name: "Foo", props: true }, // 傳遞的name的值是這里的值
{ path: '/bar/:id', component: Bar, name: "Bar", props: true },
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
</script>
</body>
</html>
通過路由傳遞參數,與方式四不同的是.這里使用props接收參數.
而在vue官網的文檔中有這么一句話:如果 props 被設置為 true，route.params 將會被設置為組件屬性。這里的組件屬性我的理解就是$route.params將會被設置組件的props屬性.並可以使用props進行接收.而這里的ture,也許指的是truthy.props可以設置為 1 或者是 一個空對象都可以達到true的作用.因為它們被隱式轉換為true了.
方式五
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/foo?q=123">Go to Foo</router-link>
<router-link to="/bar?q=456">Go to Bar</router-link>
</p>
<router-view>
</router-view>
</div>
<script>
// ******************************
// Vue Version: 2.6.11
// Vue-router Version : 3.4.3
// 時間 : 2020 / 08 / 17
// @tanplay.com
// ******************************
/*
通過URL傳遞參數
*/
const Foo = {
props: ['query'],
template: '<div @click="displayArg">Foo接收到路由傳遞的參數是:{{$route.params.query }} / {{query}}</div>', // 通過$route接收
methods: {
displayArg() {
console.log(this.$route.params);
}
},
}
const Bar = {
props: ['query'],
template: '<div>Bar接收到的路由傳遞的參數是:{{$route.params.query}} / {{query}}</div>',
}
const routes = [
{ path: '/foo', component: Foo, name: "Foo", props: (route) => ({ query: route.query.q }) }, // 傳遞的name的值是這里的值
{ path: '/bar', component: Bar, name: "Bar", props: { id: 456 } }, // truely
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
</script>
</body>
</html>
通過URL的查詢參數傳遞參數.而在props是為一個過濾函數的.通過這種方式來傳遞參數.
方式六
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<button @click='goToFoo'>Go to Foo</button>
<button @click='goToBar'>Go to Bar</button>
</p>
<router-view>
</router-view>
</div>
<script>
// ******************************
// Vue Version: 2.6.11
// Vue-router Version : 3.4.3
// 時間 : 2020 / 08 / 17
// @tanplay.com
// ******************************
/*
使用路由攜帶參數進行跳轉
*/
const Foo = {
template: '<div @click="displayArg">Foo接收到路由傳遞的參數是</div>', // 通過$route接收
methods: {
displayArg() {
console.log('----------------');
console.log(this.$route)
console.log(this.$route.params.sex);
console.log(this.$route.query.sex);
}
},
};
const Bar = {
template: '<div @click="displayArg">Bar接收到的路由傳遞的參數是</div>',
methods: {
displayArg() { // $route.params.query接收不到
console.log('----------------');
console.log(this.$route);
}
},
};
const routes = [
{ path: '/foo', component: Foo, name: "Foo", props: true }, // 傳遞的name的值是這里的值
{ path: '/bar', component: Bar, name: "Bar", }, // truely
]
const router = new VueRouter({
routes
});
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
goToFoo() {
if (this.$route.path == '/foo') {
console.log("正處在當前路由中.");
return false;
}
this.$router.push({ name: "Foo", params: { sex: "男" } }); // 使用name跳轉的頁面,使用params進行傳遞與接受.
// this.$router.push({ name: "Foo", query: { sex: "男" } }); // 使用name跳轉的頁面,使用query進行傳遞與接收.
},
goToBar() {
if (this.$route.path == '/bar') {
console.log("正處在當前路由中.");
return false;
}
this.$router.push({ path: "/bar", query: { sex: "女" } }); // 受用path跳轉的頁面,使用query進行傳遞與接受.可以把paramas與query進行互換測試.
// this.$router.push({ path: "/bar", params: { sex: "女" } }); // 這種不可使用
}
},
router,
}).$mount('#app');
/*
情況總結 :
如果是 使用name進行跳轉
- 如果跳轉的參數設置為params,那么要使用params進行接收.
- 如果使用query,要使用query進行接收.(網上都不推薦進行這樣使用.但是我不知道為什么.使用query傳參類似於HTTP請求中的GET.參數是顯式進行傳遞的,重新刷新頁面並不會丟失傳遞參數.而使用params類似於HTTP請求中的POST,重新參數之后重新刷新頁面會丟失數據.)
如果使用 path進行跳轉
- 只可以使用query進行傳遞參數
- 不可以使用parmrams進行跳轉頁面
*/
</script>
</body>
</html>
情況總結 :
- 如果是 使用是使用name進行跳轉路由.
- 如果跳轉的參數設置為params,那么要使用params進行接收.(重新刷新被跳轉的頁面,會丟失數據)
- 如果使用query,要使用query進行接收.(網上好說人不推薦這樣使用,我不明白為什么).(重新刷新被跳轉的頁面,不會丟失數據)
- 如果使用path進行跳轉
- 只可以使用query進行傳遞參數
使用 $this.router.push()進行路由跳轉.之后在被跳轉的頁面中使用$route接收.