• 目標(biāo)：純前端vue實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)restful傳值

目錄

• • 1. 全局路由配置
  • 2. 如何傳值
  • 3. 頁(yè)面取值

1. 全局路由配置

// 路由器主配置文件 import Vue from 'vue' import VueRouter from 'vue-router'import Main from '../views/main' import Login from '../views/login'// 導(dǎo)入用戶(hù)模塊 import UserList from '../views/user/list' import UserProfile from '../views/user/profile'// 頁(yè)面404處理 import NotFound from "../views/NotFound";// 安裝路由 Vue.use(VueRouter)// 配置導(dǎo)出路由 export default new VueRouter({mode: 'history', // history || hash 帶#號(hào)// 配置多個(gè)路由器routes: [{path: '/main', // 指定路由路徑name: 'main',component: Main, // 跳轉(zhuǎn)的組件children: [{//path: '/user/list',path: '/user/list/:id', // 接收vue組件傳來(lái)的值name: 'UserList',component: UserList,props: true // 可綁定到vue實(shí)例的props},{path: '/user/profile',component: UserProfile}]},{path: '/login',name: 'login',component: Login // 跳轉(zhuǎn)到login組件},{path: '/goLogin',redirect: '/login' // 值為路由的name屬性 或者路徑}, {path: '/*',component: NotFound // 沒(méi)有找到對(duì)應(yīng)頁(yè)面，統(tǒng)配所有}] })

2. 如何傳值

• main.vue 里面套了用戶(hù)列表的鏈接，跳轉(zhuǎn)到list.vue ，利用params傳值
  

<template><!-- main主頁(yè)展示了三個(gè)鏈接，頁(yè)面跳轉(zhuǎn)會(huì)顯示對(duì)應(yīng)的視圖 --><!-- 組件只有一個(gè)根結(jié)點(diǎn) --><div><h1>main 主頁(yè)</h1><!--<router-link to="/user/list">用戶(hù)列表</router-link>--><!-- 參數(shù)傳遞 name為路由器中的name --><router-link :to="{name:'UserList', params: {id: 1}}">用戶(hù)列表</router-link><router-link to="/user/profile">用戶(hù)信息</router-link><router-link to="/goLogin">login page</router-link><router-view></router-view></div></template><script>export default {name: "main1"} </script>

• 路由接收vue-link傳來(lái)的值

3. 頁(yè)面取值

• list.vue 組件取值

<template><div><h1>用戶(hù)列表</h1><!--取值..-->{{ $route.params.id }}{{ id }}</div> </template><script>export default {name: "UserList",props: ['id'] // props 接收} </script><style scoped></style>

總結(jié)

以上是生活随笔為你收集整理的vue参数传递的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。