怎么建一个公司运营网站,微信网站api,摄影作品发布平台,免费网站建设图书下载目标#xff1a;纯前端vue实现页面跳转restful传值 目录1. 全局路由配置2. 如何传值3. 页面取值1. 全局路由配置
// 路由器主配置文件
import Vue from vue
import VueRouter from vue-routerimport Main from ../views/main
import Login from ../views/login// 导入用户模块…目标纯前端vue实现页面跳转restful传值 目录1. 全局路由配置2. 如何传值3. 页面取值1. 全局路由配置
// 路由器主配置文件
import Vue from vue
import VueRouter from vue-routerimport 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主页展示了三个链接页面跳转会显示对应的视图 --!-- 组件只有一个根结点 --divh1main 主页/h1!--router-link to/user/list用户列表/router-link--!-- 参数传递 name为路由器中的name --router-link :to{name:UserList, params: {id: 1}}用户列表/router-linkrouter-link to/user/profile用户信息/router-linkrouter-link to/goLoginlogin page/router-linkrouter-view/router-view/div/templatescriptexport default {name: main1}
/script
路由接收vue-link传来的值 3. 页面取值
list.vue 组件取值
templatedivh1用户列表/h1!--取值..--{{ $route.params.id }}{{ id }}/div
/templatescriptexport default {name: UserList,props: [id] // props 接收}
/scriptstyle scoped/style
