1.安装（如果在创建项目的时候没有确认安装）
1
| cnpm install vue-router --save
|
之后在src下会生成一个文件夹router，这里我们删除这个文件夹。（安装好就行了，不用它的默认文件夹，我们自己封装）
2.配置
在根目录下（与main.js同级），创建routes.js文件，内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| import Login from '@/components/Login'
import index from '@/components/index'
import Theme from '@/Views/Theme'
import PermissionManage from '@/Views/PermissionManage'
import MenuManage from '@/Views/MenuManage'
export default [
{ path: "/", component: Login },/*默认登录页面*/
{ path: "/Login", component: Login },/*路由跳转登录页面*/
{
path: "/index", component: index, children: [
{ path: "/", component: Theme },/*二级菜单主页*/
{ path: "/PermissionManage", component: PermissionManage },/*角色权限管理*/
{ path: "/MenuManage", component: MenuManage },/*菜单管理*/
]
},
]
|
文件夹目录结构：
默认主页是登录页面：Login
登录成功后进入页面：index 这个页面的构成如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <template>
<div id="index">
<mainheader></mainheader>
<el-container>
<mainleft></mainleft>
<maincontent></maincontent>
</el-container>
</div>
</template>
<script>
import mainheader from "@/components/mainheader";
import mainleft from "@/components/mainleft";
import maincontent from "@/components/maincontent";
import mainbottom from "@/components/mainbottom";
import { navActive } from "../assets/theme/js/frame";
export default {
inject: ["reload"],
created() {
var getuid = sessionStorage.getItem("uid");
if (getuid == null) {
this.$router.push({
path: `/`,
});
} else {
this.reload();
}
},
mounted: function () {
setTimeout(() => {
this.reload();
}, 1000);
},
components: {
mainheader,
mainleft,
maincontent,
mainbottom,
},
name: "Index",
};
</script>
|
由顶部（mainheader）、左边菜单（mainleft），内容区（maincontent）、底部（mainbottom）构成
maincontent （内容区）包含有路由容器：router-view
1
2
3
4
5
6
7
8
9
10
11
12
| <template>
<div id="maincontent">
</div>
<div class="rcontent">
<router-view :key="$route.fullPath"></router-view>
</div>
</div>
</template>
<script>
export default {};
</script>
|
左边菜单通过
1
2
3
4
5
| this.$router.push({
path: `/` +Theme ,
});
|
通过路由容易的渲染，便可在内容区渲染出路由名Theme这个页面，
同样的页面还有：PermissionManage、MenuManage
这些都是相对于index的子菜单或称为二级菜单；路由的表现形式如下：
1
2
3
4
5
6
| path: "/index", component: index, children: [
{ path: "/", component: Theme },/*二级菜单主页*/
{ path: "/PermissionManage", component: PermissionManage },/*角色权限管理*/
{ path: "/MenuManage", component: MenuManage },/*菜单管理*/
]
},
|
3.在main.js中引入并挂载路由
1
2
3
4
5
6
| import Routes from './routes.js'
const router = new VueRouter({
routes: Routes,
mode: "history"
})
|
配置好路由后，除了通过router-veiw，还可通过 router-link实现路由跳转
1
| 示例：<router-link to="/home"></router-link>
|