• 目标：纯前端vue实现页面跳转restful传值

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>