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">
            
            <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>

 引入和导出的语法

// 引用指定组件
// import ZhangZiHao from './components/demo01.vue'

Top与MainPage

<template>
    <nav class="navbar navbar-dark bg-dark">
        <a href="" style="color:#fff">我是导航条a>
    nav>
template>

<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>
<script>
    import  Menu from './menu.vue'
    export default {
        components:{
            Menu
        }
    }
script>

通过路由标签可以加载不同的组件,这样我们再来一个主窗口就ok了。

 主页面:admin.vue

<template>
    <div>
        <top-bar>top-bar>
        <main-page>main-page>
    div>
template>
<script>
import TopBar from './top'
import MainPage from './main'
export default {
    components:{
        TopBar,MainPage
    }
}
script>

路由规则定义：

// Vue 模块
import vue from 'vue'
// 引入路由组件
import Router from 'vue-router'
// 将 路由组件 应用到 Vue 程序中。
vue.use(Router)



// 创建并 导出 路由模块，并设置路由规则
// new Router(RouterConfi:object)
// RouterConfig   - >  routes:[]  设置路由规则
export default  new Router({
    routes:[
        {
            path :'/admin',
            name :'admin',
            component:()=>import ('../views/admin.vue'),
            children:[
                {
                    path :'/admin/user',
                    name :'user',
                    component:()=>import ('../views/user.vue')
                },
                {
                    path :'/admin/book',
                    name :'book',
                    component:()=>import ('../views/book.vue')
                },
                {
                    path :'/admin/order',
                    name :'order',
                    component:()=>import ('../views/order.vue')
                }
            ]
        },
        {
            path :'/menu',
            name :'menu',
            component:()=>import ('../views/menu.vue')
        }
    ]
})
// 

效果图：