专栏首页葫芦cssjshtml vue.js 多级路由

cssjshtml vue.js 多级路由

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home'
import Menu from './components/Menu'
import Admin from './components/Admin'
import About from './components/about/About'
import Login from './components/Login'
import Register from './components/Register'

//二级路由
import Contact from './components/about/Contact'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import OderingGuide from './components/about/OderingGuide'

// 三级路由
import Person from './components/about/contact/PersonName'
import PhoneNumber from './components/about/contact/Phone'

Vue.use(VueRouter)

const routes = [
  {path: '/', component: Home},
  {path: '/menu', name: "menulink", component: Menu},
  {path: '/admin', name: "adminlink", component: Admin},
  {
    path: '/about', name: "aboutlink", redirect: '/about/contact', component: About, children: [
      {
        path: '/about/contact', name: "contactLink", redirect: '/personname', component: Contact, children: [
          {path: '/phone', name: "phoneNumber", component: PhoneNumber},
          {path: '/personname', name: "personName", component: Person}

        ]
      },
      {path: '/history', name: "historyLink", component: History},
      {path: '/delivery', name: "deliveryLink", component: Delivery},
      {path: '/oderingguide', name: "oderingGuideLink", component: OderingGuide},
    ]
  },
  {path: '/login', name: "loginlink", component: Login},
  {path: '/register', name: "registerlink", component: Register},
  {path: "*", redirect: '/'}
]
const router = new VueRouter({
  routes,
  mode: 'history'

})


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

About.vue

<template>
  <div>
    <div class="row mb-5">
      <div class="col-4">
        <!-- 导航 -->
        <div class="list-group mb-5">
          <router-link tag="li" class="nav-link" :to="{name:'historyLink'}">
            <a class="list-group-item list-group-item-action">历史订单</a>
          </router-link>
          <router-link tag="li" class="nav-link" :to="{name:'contactLink'}">
            <a class="list-group-item list-group-item-action">联系我们</a>
          </router-link>
          <router-link tag="li" class="nav-link" :to="{name:'oderingGuideLink'}">
            <a class="list-group-item list-group-item-action">点餐文档</a>
          </router-link>
          <router-link tag="li" class="nav-link" :to="{name:'deliveryLink'}">
            <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>

<script>
  export default {
    name: "About"
  }
</script>

<style scoped>

</style>

Contact.vue

<template>
  <div class="card text-dark bg-light mb-3">
    <div class="card-header">联系我们</div>
    <div class="card-body">
      <h4 class="card-title">联系我们</h4>
      <p class="card-text">277215243@qq.com</p>
      <router-link :to="{name:'phoneNumber'}">电话</router-link>
      <router-link :to="{name:'personName'}">联系人</router-link>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>

</script>

<style scoped>

</style>

PersonName.vue

<template>
    <h1>brownwang</h1>
</template>

<script>
    export default {
        name: "PersonName"
    }
</script>

<style scoped>

</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • cssjshtml vue.js 路由跳转,导航制作

    葫芦
  • cssjshtml vue.js router redirect tag

    葫芦
  • linux 倒序输出

    葫芦
  • 06 . Vue路由简介,原理,实现及嵌套路由,动态路由,编程式导航

    基于URL的hash实现(点击菜单的时候改变URL的hash,根据hash的变化控制组件的切换)

    常见_youmen
  • vueRouter-命名路由 原

    有时候通过一个名称来识别一个路由显得更方便,特别是在链接一个路由,或者是执行一些跳转的时候, 你可以在创建Router实例的时候,在routers配置中为某个...

    tianyawhl
  • vueRouter-Getting Started

    用Vue.js+vue-router创建单页应用是非常简单的。使用Vue.js,我们已经可以通过组合组件来组成应用程序,当你把vue-router添加进来,我们...

    tianyawhl
  • Python Django开发 经验技巧总结(二)

    从django后台打印的post信息可以看到多选框里面的内容是列表的形式,request.POST.getlist()可以接收到所有共享同一个name的va...

    cutercorley
  • 基于 Go 语言开发在线论坛(五):创建群组和主题

    在上篇教程中,我们基于 Cookie + Session 实现了简单的用户认证功能,用户认证之后,就可以创建群组和主题了,今天我们就来一起看看如何创建群组和主题...

    学院君
  • SpringBoot2.x快速入门指南(一)

    demo.zip解压之后记得复制下demo文件夹放的路径 在此用的开发工具是IntelliJ IDEA 下面是导入流程: IDEA里点击File -> Open...

    拾荒者的笔记
  • vue嵌套路由

      在实际项目中,多个前端页面由于需求而通常由多层嵌套的组件组合而成,尤其是多导航界面。此时,路由嵌套(vue-router)的优点则表现了出来。嵌套路由就是在...

    流眸

扫码关注云+社区

领取腾讯云代金券