Vue入門十三、路由的傳參和取參
1、查詢參login?id=12345
配置：（傳參）:to="{name:'login', query:{id:'loginid'}}"
獲取：（取參）this.$route.query.id
我們提供的服務有：成都網站設計、成都網站制作、外貿網站建設、微信公眾號開發、網站優化、網站認證、愛民ssl等。為上千企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的愛民網站制作公司
2、路由參數
配置：（傳參）:to="{name:'login', params:{id:'loginid'}}"
獲取：（取參）this.$route.params.id
3、路徑參數register/registerid/info
配置：（傳參）:to="{name:'register', params:{id:'registerid'}}"
配置路由規則：
routes: [{path: '/register/:id/info', name: 'register', component: Register}]
獲取：（取參）this.$route.params.id
4、使用props直接取參
配置：（傳參）:to="{name:'propsParams', params:{id:'propsParamsId'}}"
配置路由規則：
routes: [
// 通過props傳值
{path: '/propsParams', name: 'propsParams', props: true, component: PropsParams}]
獲取：（取參）
var PropsParams = {
template: `
<div>傳參直接取值
<br>
直接拿到ID:{{id}}
</div>
`,
// 直接通過props取參
props: ['id']
}5、通過JS進行傳參
this.$router.push({path: '/login', name: 'login', query: {id: 'loginidjs'}})
代碼示例：
query傳參：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
var Login = {
template: `
<div>登陸了
<br>
登陸ID:{{msg}}
</div>
`,
data() {
return {
msg: ''
}
},
created() {
this.msg = this.$route.query.id
}
}
// 安裝插件
Vue.use(VueRouter);
// 創建路由對象
var router = new VueRouter({
// 配置路由對象
routes: [{path: '/login', name: 'login', component: Login}
]
})
new Vue({
el: '#app',
router,
template: `
<div>
<router-link :to="{name:'login', query:{id:'loginid'}}">query傳參</router-link>
<router-view></router-view>
</div>
`
}
)
</script>
</body>
</html>params傳參
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
var Register = {
template: `
<div>注冊了
<br>
注冊ID:{{msg}}
</div>
`,
data() {
return {
msg: ''
}
},
created() {
this.msg = this.$route.params.id
}
}
var PathParams = {
template: `
<div>路徑傳參
<br>
路徑ID:{{pat}}
</div>
`,
data() {
return {
pat: ''
}
},
created() {
this.pat = this.$route.params.id
}
}
// 安裝插件
Vue.use(VueRouter);
// 創建路由對象
var router = new VueRouter({
// 配置路由對象
routes: [
{path: '/register', name: 'register', component: Register}
]
})
new Vue({
el: '#app',
router,
template: `
<div>
<router-link :to="{name:'register', params:{id:'registerid'}}">params傳參</router-link>
<router-view></router-view>
</div>
`
}
)
</script>
</body>
</html>params路徑傳參
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
var Register = {
template: `
<div>注冊了
<br>
注冊ID:{{msg}}
</div>
`,
data() {
return {
msg: ''
}
},
created() {
this.msg = this.$route.params.id
}
}
var PathParams = {
template: `
<div>路徑傳參
<br>
路徑ID:{{pat}}
</div>
`,
data() {
return {
pat: ''
}
},
created() {
this.pat = this.$route.params.id
}
}
// 安裝插件
Vue.use(VueRouter);
// 創建路由對象
var router = new VueRouter({
// 配置路由對象
routes: [
{path: '/register/:id/info', name: 'register', component: Register}
]
})
new Vue({
el: '#app',
router,
template: `
<div>
<router-link :to="{name:'register', params:{id:'registerid'}}">path傳參</router-link>
<router-view></router-view>
</div>
`
}
)
</script>
</body>
</html>params使用props直接取參
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
var PropsParams = {
template: `
<div>傳參直接取值
<br>
直接拿到ID:{{id}}
</div>
`,
// 直接通過props取參
props: ['id']
}
// 安裝插件
Vue.use(VueRouter);
// 創建路由對象
var router = new VueRouter({
// 配置路由對象
routes: [
// 通過props傳值
{path: '/propsParams', name: 'propsParams', props: true, component: PropsParams}
]
})
new Vue({
el: '#app',
router,
template: `
<div>
<router-link :to="{name:'propsParams', params:{id:'propsParamsId'}}">傳參直接取值</router-link>
<router-view></router-view>
</div>
`
}
)
</script>
</body>
</html>js傳參
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
// 安裝插件
Vue.use(VueRouter);
// 創建路由對象
var router = new VueRouter()
// 創建路由對象
new Vue({
el: '#app',
router,
template: `
<div>
<button @click="goLogin">JS跳轉登錄頁面</button>
</div>
`,
methods: {
goLogin() {
// 使用js路由跳轉貌似只能使用query傳參
this.$router.push({path: '/login', name: 'login', query: {id: 'loginidjs'}})
}
}
}
)
</script>
</body>
</html>fullPath路由全路徑監聽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
var Login = {
template: `
<div>登陸了
<br>
登陸ID:{{msg}}
</div>
`,
data() {
return {
msg: ''
}
},
created() {
this.msg = this.$route.query.id
}
}
// 安裝插件
Vue.use(VueRouter);
// 創建路由對象
var router = new VueRouter({
// 配置路由對象
routes: [
{path: '/login', name: 'login', component: Login}
]
})
new Vue({
el: '#app',
router,
template: `
<div>
<router-link :to="{name:'login', query:{id:'loginid'}}">query傳參</router-link>
<button @click="goLogin">js跳轉</button>
// js跳轉和標簽跳轉同一頁面,路由相同而參數不同頁面ID不刷新問題
// 使用全路徑監聽fullPath
<router-view :key="$route.fullPath"></router-view>
</div>
`,
methods: {
goLogin() {
this.$router.push({path: '/login', name: 'login', query: {id: 'loginidjs'}})
}
}
}
)
</script>
</body>
</html>完整代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
var Login = {
template: `
<div>登陸了
<br>
登陸ID:{{msg}}
</div>
`,
data() {
return {
msg: ''
}
},
created() {
this.msg = this.$route.query.id
}
}
var Register = {
template: `
<div>注冊了
<br>
注冊ID:{{msg}}
</div>
`,
data() {
return {
msg: ''
}
},
created() {
this.msg = this.$route.params.id
}
}
var PathParams = {
template: `
<div>路徑傳參
<br>
路徑ID:{{pat}}
</div>
`,
data() {
return {
pat: ''
}
},
created() {
this.pat = this.$route.params.id
}
}
var PropsParams = {
template: `
<div>傳參直接取值
<br>
直接拿到ID:{{id}}
</div>
`,
props: ['id']
}
// 安裝插件
Vue.use(VueRouter);
// 創建路由對象
var router = new VueRouter({
// 配置路由對象
routes: [{path: '/login', name: 'login', component: Login},
{path: '/register', name: 'register', component: Register},
// 路徑傳參
{path: '/pathParams/:id/info', name: 'pathParams', component: PathParams},
// 直接取
{path: '/propsParams', name: 'propsParams', props: true, component: PropsParams}
]
})
new Vue({
el: '#app',
router,
template: `
<div>
<router-link :to="{name:'login', query:{id:'loginid'}}">query傳參</router-link>
<router-link :to="{name:'register', params:{id:'registerid'}}">params傳參</router-link>
<router-link :to="{name:'pathParams', params:{id:'123456'}}">path傳參</router-link>
<router-link :to="{name:'propsParams', params:{id:'propsParamsId'}}">傳參直接取值</router-link>
<button @click="goLogin">JS跳轉登錄頁面</button>
<router-view :key="$route.fullPath"></router-view>
</div>
`,
methods: {
goLogin() {
this.$router.push({path: '/login', name: 'login', query: {id: 'loginidjs'}})
}
}
}
)
</script>
</body>
</html>
當前標題：Vue入門十三、路由的傳參和取參
標題鏈接：http://m.kartarina.com/article26/pgcejg.html
成都網站建設公司_創新互聯，為您提供外貿網站建設、ChatGPT、Google、手機網站建設、網站導航、網站收錄
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
- 合肥企業定制網站該如何對網頁排版布局呢？ 2022-05-15
- 高端定制網站策劃需要要怎么做 2021-08-17
- 長沙高端定制網站建設公司哪家好？ 2022-09-24
- 定制網站不僅僅利于優化這樣簡單 2016-04-29
- 成都定制網站必備的一些小知識 2022-07-20
- 定制網站彰顯企業獨特之美 2023-03-14
- 模板建站、智能(自助)建站、定制網站建設利弊有哪些 2021-07-01
- 定制網站建設與模板網站建設的區別有哪些？ 2022-05-29
- 選擇定制網站模板必須要掌握原則 2023-05-02
- 企業拒絕模板選擇定制網站的原因是什么？ 2014-01-24
- 定制網站需要多少錢昆山網站建設公司報價表 2022-11-26
- 【建站知識】企業定制網站建設的優勢都有哪些？ 2022-06-20