ASP.NET Core 微信直播 Nginx环境搭建 主从复制 jquery swing view insert 后台ui模板 nodejs视频教程 nodejs教程视频 js鼠标离开事件 oracle限制查询条数 plsql连接mysql数据库 java在线教程 java集合框架 java实例方法 linuxsleep sql实例 登录界面html xs颜色 python的用途 图片生成网址 网络文件服务器 银头鲑鱼 松下plc编程软件 深入解析windows操作系统 光标变粗 快递电子面单打印软件 wps苹果mac版 太阳代理ip 小程序图片上传 winrar去广告版 Ivideo android浏览器 输入法修复 php是什么文件 win10截屏 1474是ipad几 苹果定时关机
当前位置: 首页 > 学习教程  > 编程语言

路由嵌套

2020/9/19 13:36:25 文章标签:

路由嵌套

router index.js

import VueRouter from "vue-router"
import Vue from "vue"


const Home = ()=> import ("@/components/Home")
const About = ()=> import ("@/components/About")
const Btn1Component = ()=> import ("@/components/Btn1Component")
const Btn2Component = ()=> import ("@/components/Btn2Component")
const Dynamic = ()=> import ("@/components/Dynamic")
const Nested = ()=> import ("@/components/Nested")
const Nested1 = ()=> import("@/components/Nested1")
const Nested2 = ()=> import("@/components/Nested2")


/**
 * 安装插件
 */
Vue.use(VueRouter)

/**
 * 创建路由对象
 * @type {*[]}
 */
const routes = [
   {
      path: '/',
      redirect: '/home'
   },
   {
      path: '/home',
      component: Home
   },
   {
      path: '/about',
      component: About
   },
   {
      path: '/btn1Component',
      component: Btn1Component
   },
   {
      path: '/btn2Component',
      component: Btn2Component
   },
   {
      path: '/dynamic/:params',
      component: Dynamic
   },
   {
      path: '/nested',
      component: Nested,
      children: [
         {
            path: '',
            redirect: 'nested1'
         },
         {
            path: 'nested1',
            component: Nested1
         },
         {
            path: 'nested2',
            component: Nested2
         }
      ]
   }
]

/**
 * 初始化路由 配置
 * @type {VueRouter}
 */
const router = new VueRouter({
   routes,
   mode: 'history',
   linkActiveClass: 'active'
})

/**
 * 导出路由
 */
export default router


Nested.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

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

<style scoped>

</style>

app.vue

<template>
  <div id="app">
    <div style="display: flex;flex-direction: row;height: 100%;width: 100%;">
      <div style="height: 100%;background-color: antiquewhite;flex-grow: 1">
        <ul style="padding: 0px">
          <router-link tag="li" replace to="/home" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">首页</router-link>
          <router-link tag="li" replace to="/about" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">关于</router-link>
          <li style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">
            <button @click="btn1Click">按钮1</button>
          </li>
          <li style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">
            <button @click="btn2Click">按钮2</button>
          </li>
          <router-link tag="li" replace :to="'/dynamic/'+userId" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">动态路由</router-link>
          <router-link tag="li" replace to="/nested" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">嵌套路由</router-link>
          <li>
            <ul>
              <router-link tag="li" replace to="/nested/nested1" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">嵌套路由1</router-link>
              <router-link tag="li" replace to="/nested/nested2" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">嵌套路由2</router-link>
            </ul>
          </li>
        </ul>
      </div>
      <div style="height: 100%;background-color: aqua;flex-grow:6;display: flex;flex-direction: column">
        <div style="background-color: azure;flex-grow: 1">
          我是面包屑
        </div>
        <div style="background-color: cornsilk;flex-grow: 15">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      userId:"Icez"
    }
  },
  components: {
  },
  methods: {
    btn1Click(){
      //退入栈中component
      // this.$router.push('/btn1Component')
      //替换当前栈中的后进来的component
      this.$router.replace('/btn1Component')
    },
    btn2Click(){
      //退入栈中component
      // this.$router.push('/btn2Component')
      //替换当前栈中的后进来的component
      this.$router.replace('/btn2Component')
    }
  }
}
</script>

<style>
#app,body,html{
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}
.active{
  color: red;
}
</style>

效果

在这里插入图片描述


本文链接: http://www.dtmao.cc/news_show_200035.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?