• 目標：純前端vue實現頁面跳轉restful傳值

目錄

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

1. 全局路由配置

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

2. 如何傳值

• main.vue 里面套了用戶列表的鏈接，跳轉到list.vue ，利用params傳值
  

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

• 路由接收vue-link傳來的值

3. 頁面取值

• list.vue 組件取值

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

總結

以上是生活随笔為你收集整理的vue参数传递的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。