xinggevip

Vue2.x Cli3.x 二级路由及三级路由
router.jsimport Vue from 'vue' import Router from 'vue-ro...
扫描右侧二维码阅读全文
26
2019/05

Vue2.x Cli3.x 二级路由及三级路由

router.js

import Vue from 'vue'
import Router from 'vue-router'
//一级路由
import Home from './views/Home.vue'
import About from './views/About.vue'
//二级路由
import Contect from './components/about/Contect'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import Order from './components/about/Order'
// 三级路由
import Person from './components/about/other/Person'
import Num from './components/about/other/Num'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      //点击关于我们默认展示联系我们
      redirect:'/contect',
      component: About,
      children:[
        {
          path:'/delivery',
          name:'delivery',
          component:Delivery
        },
        {
          path:'/history',
          name:'history',
          // 点击历史订单默认展示姓名
          redirect:'/person',
          component:History,
          children:[
            {path:'/person',name:'person',component:Person},
            {path:'/num',name:'num',component:Num},
            
          ]
        },
        {
          path:'/contect',
          name:'contect',
          component:Contect,
          
        },
        {
          path:'/order',
          name:'order',
          component:Order
        },
        

      ]
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      //component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/admin',
      name: 'admin',
      component: () => import('./components/Admin.vue')
    },
    {
      path: '/header',
      name: 'header',
      component: () => import('./components/Header.vue')
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('./components/Login.vue')
    },
    {
      path: '/menu',
      name: 'menu',
      component: () => import('./components/Menu.vue')
    },
    {
      path: '/register',
      name: 'register',
      component: () => import('./components/register.vue')
    },
    {
      // 当路由匹配不到以上路由地址的时候,自动匹配到制定路由地址
      path:"*",
      redirect:'/'
    }
  ]
})

About.vue

<template>
  <div class="about">
    <div class="row mb-5">
      <div class="col-4">
        <!-- 导航 -->
        <div class="list-group mb-5">
          <router-link tag="li" class="nav-link" :to="{name:'history'}">
            <a class="list-group-item list-group-item-action">历史订单</a>
          </router-link>
          <router-link tag="li" class="nav-link" :to="{name:'contect'}">
            <a class="list-group-item list-group-item-action">联系我们</a>
          </router-link>
          <router-link tag="li" class="nav-link" :to="{name:'order'}">
            <a class="list-group-item list-group-item-action">点餐文案</a>
          </router-link>
          <router-link tag="li" class="nav-link" :to="{name:'delivery'}">
            <a class="list-group-item list-group-item-action">快递信息</a>
          </router-link>
        </div>
      </div>
      <div class="col-8">
        <!-- 导航所对应的内容 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

History.vue

<template>
  <div class="history">
      <div class="card text-dark bg-lighe mb3">
          <div class="card-header">历史订单</div>
            <div class="card-body">
                <h4 class="card-title">历史订单</h4>
                <p class="card-text">1511844263@qq.com</p>

                <router-link :to="{name:'person'}">姓名</router-link>
                <router-link :to="{name:'num'}">电话</router-link>

                <router-view></router-view>
            </div>
      </div>
  </div>
</template>
Last modification:May 26th, 2019 at 05:39 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment