Vue Route Building the UI back-end framework

Vue 的路由就像ASP.NET MVC路径相似。

路由定义文件也是js格式的,我们都将这些文件放入到src的route文件中。

后台框架主入口：

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <Menu></Menu>
            </div>
            <div class="col-md-10">
                <!-- 通过路由 加载不同组件的 标签 -->
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

那我们如何在这个视图中呈现别的视图呢,我们现在这个里面去引入一个Menu.所以我们先创建已个Menu视图在引入到主窗体,再通过主窗体去引导别的视图。

<template>
    <ul class="list-group">
        <li class="list-group-item">
            <!-- 路由链接   to 调转地址  tag 生成的标签（默认为 a）-->
            <router-link to="/admin/user" tag="span" class="btn btn-danger">用户管理</router-link>
        </li>
        <li class="list-group-item">
            <router-link to="/admin/book">图书管理</router-link>
        </li>
        <li class="list-group-item">
            <router-link to="/admin/order">订单管理</router-link>
        </li>
    </ul>
</template>

Vue Route Building the UI back-end framework

猜你喜欢