路由的使用

路由的使用

路由重定向

redirect

javascript 复制代码
 {
        path: '/',
        // 通过这种方式,在访问/路径的时候会重定向到/login路径
        redirect: '/login'
    },
路由高亮

router-link-active

自定义 linkActiveClass

javascript 复制代码
//APP.vue
<style>
.router-link-active {
  background-color: aquamarine;
  font-size: 20px;
}

.my-active {
  background-color: aquamarine;
  font-size: 20px;
}
</style>

//src/router/index.js
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
    linkActiveClass:'my-active'
})

路由嵌套 ⻚面布局

  • 在路由里面加一个children属性,是一个数组,数组里面是路由对象, path里面不加'/',
  • 在嵌套的父组件里面加上router-view标签
javascript 复制代码
import Vue from 'vue'
import VueRouter from 'vue-router'
import ParentComp from '@/views/ParentComp.vue'
import login from '@/components/login.vue'
import registry from '@/components/registry.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        // 通过这种方式,在访问/路径的时候会重定向到/login路径
        redirect: '/parent'
    },
    {
        path: '/parent',
        component: ParentComp,
        // 涉及到了子路由的内容
        children: [
            {
                // 这就是用相对路径,相对于父组件的,这个实际路径就是/parent/login
                path: 'login',
                component: login
            },
            {
                // 这就是用相对路径,相对于父组件的,这个实际路径就是/parent/login
                path: 'registry',
                component: registry
            }
        ]
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    linkActiveClass: 'my-active',
    routes
})

export default router
命名视图
  • 一个路径可以对应多个组件 属性components
javascript 复制代码
//APP.vue
<template>
  <!-- 通过这个路由的嵌套,我们可以实现一些布局 -->
  <div id="app">
    <!-- router-view可以设置名字,指定渲染的组件 -->
    <router-view></router-view>
    <div class='my-container'>
      <router-view name='sidebar'></router-view>
      <router-view name='main'></router-view>
    </div>
  </div>
</template>
<style>
  .router-link-active {
      background-color: aquamarine;
      font-size: 20px;
    }

    .my-active {
      background-color: aquamarine;
      font-size: 20px;
    }

    .header {
      width: 100%;
      height: 80px;
      background-color: red;
    }

    .my-container {
      height: calc(100vh - 80px);
    }

    .sidebar {
      height: 100%;
      float: left;
      width: 200px;
      background-color: gray;
    }

    .main {
      height: 100%;
      margin-left: 200px;
      background-color: khaki;
    }
</style>
javascript 复制代码
//src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HeaderModel from '@/components/HeaderModel.vue'
import SidebarModel from '@/components/SidebarModel.vue'
import MainModel from '@/components/MainModel.vue'
// import TestModel from '@/components/TestModel.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    // 使用 components 可以定义多个组件
    components: {
      // 通过default属性可以设置默认的组件,默认组件只有一个,不写名字也可以渲染
      default: HeaderModel,
      sidebar: SidebarModel,
      MainModel
    },
    // children: [
    //     { path: 'test', component: TestModel }
    // ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  linkActiveClass: 'my-active',
  routes
})

export default router
相关推荐
UIUV29 分钟前
CSS 高级动画学习笔记 —— 从 “亲吻小球” 案例看 CSS 核心技术
前端·css
星链引擎39 分钟前
智能聊天机器人 技术架构核心实现与场景化落地
前端
yoyoma40 分钟前
彻底搞懂 JavaScript 闭包:原理、陷阱与内存优化全解析
前端·javascript
茄汁面42 分钟前
Angular(TypeScript ) 中基于 ExcelJS 实现导入模板下载功能(带样式与数据验证)
前端·javascript·node.js
前端九哥43 分钟前
老板:就是你小子删光了try-catch?
前端·javascript
杰出的胡兵43 分钟前
2v1带您实战12nm高级数字后端
前端·soc·数字后端·数字ic后端·芯片设计全流程培训
Achieve前端实验室43 分钟前
深入浅出 ES Module
前端·javascript·前端框架
炳子44 分钟前
小程序地图组件(map)中使用全屏预览图片(previewImage)的问题解决方案
前端
Onion44 分钟前
BroadcastChannel 使用:优缺点、场景示例与最佳实践
前端·javascript
东东2331 小时前
搭建 Vite + React 服务端渲染(SSR)环境
前端·javascript·react.js