2019狂神說VUE【7、引數傳遞(轉發)&重定向】
阿新 • • 發佈:2021-11-09
Main.vue
<template> <div> <el-container> <el-aside width="200px"> <el-menu :default-openeds="['1']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-caret-right"></i>使用者管理</template> <el-menu-item-group> <el-menu-item index="1-1"> <!--<router-link to="/user/profile">個人資訊</router-link>--> <router-link v-bind:to="{name:'MyUserProfile',params:{id:7}}">個人資訊</router-link> </el-menu-item> <el-menu-item index="1-2"> <router-link to="/user/list">使用者列表</router-link> </el-menu-item> <el-menu-item index="1-3"> <router-link to="/goHome">回到首頁</router-link> </el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-caret-right"></i>內容管理</template> <e1-menu-item-group> <el-menu-item index="2-1">分類管理</el-menu-item> <el-menu-item index="2-2">內容列表</el-menu-item> </e1-menu-item-group> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-caret-right"></i>系統管理</template> <e1-menu-item-group> <el-menu-item index="3-1">使用者設定</el-menu-item> </e1-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right:15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>個人資訊</el-dropdown-item> <el-dropdown-item>退出登入</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-main> <router-view /> </el-main> </el-container> </el-container> </div> </template> <script> exportdefault { name: "Main" } </script> <style scoped lang="scss"> .el-header { .el-header { backdrop-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; } } </style>
router/index.js
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' Vue.use(VueRouter); export default new VueRouter({ routes: [ { path: '/login', component: Login }, { path:'/main', component: Main, children: [ //巢狀路由 {path: '/user/list', component: UserList}, // {path: '/user/profile/:id', name: 'MyUserProfile', component: UserProfile} //接收引數-方式1 {path: '/user/profile/:id', name: 'MyUserProfile', component: UserProfile, props: true} //接收引數-方式2 ] }, { path: '/goHome', redirect: '/main' //重定向 } ] });
views/user/Profile.vue
<template> <div> <!--注意template標籤下只能有一個根節點,即通常將所有元素都放到一個div裡--> <h1>個人資訊</h1> <!--{{ $route.params.id }}--> <!--方式1--> {{id}} <!--方式2-2--> </div> </template> <script> export default { name: "Profile", props: ['id'] //方式2-1 } </script> <style scoped> </style>