参数传递
方式一
-
修改路由配置
import Vue from 'vue'; import VueRouter from 'vue-router'; import Main from '../views/Main'; import Login from '../views/Login'; import UserProfile from '../views/user/Profile' import UserList from '../views/user/List' Vue.use(VueRouter); export default new VueRouter({ routes:[ { path: '/main', component: Main, children: [ { path: '/user/profile/:id', name:'UserProfile', component: UserProfile }, { path: '/user/list', component: UserList } ] }, { path: '/login', component: Login } ] });
-
视图层传递参数
<router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
:to 能够将该属性看作对象,router-link中的name属性必须和路由中的name属性匹配
-
接受参数
<template> <div> <h1>个人信息</h1> { { $route.params.id }} </div> </template>
注意route 不是 router 并且所有元素必须在根节点下面 不然报错
方式二
使用props
-
修改路由配置
import Vue from 'vue'; import VueRouter from 'vue-router'; import Main from '../views/Main'; import Login from '../views/Login'; import UserProfile from '../views/user/Profile' import UserList from '../views/user/List' Vue.use(VueRouter); export default new VueRouter({ routes:[ { path: '/main', component: Main, children: [ { path: '/user/profile/:id', name:'UserProfile', component: UserProfile, props: true }, { path: '/user/list', component: UserList } ] }, { path: '/login', component: Login } ] });
-
传递参数
<router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
-
接受参数
<template> <div> <h1>个人信息</h1> { {id}} </div> </template> <script> export default { props: ['id'], name: "UserProfile" } </script> <style scoped> </style>
重定向
在路由中添加
{
path: '/toHP',
redirect: '/main'
}
index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Main from '../views/Main';
import Login from '../views/Login';
import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'
Vue.use(VueRouter);
export default new VueRouter({
routes:[
{
path: '/main',
component: Main,
children: [
{
path: '/user/profile/:id',
name:'UserProfile',
component: UserProfile,
props: true
},
{
path: '/user/list',
component: UserList
}
]
},
{
path: '/login',
component: Login
},
{
path: '/toHP',
redirect: '/main'
}
]
});
视图层配置
<el-menu-item index="1-3">
<!--插入的地方-->
<router-link to="/toHP">返回首页</router-link>
</el-menu-item>