路由的使用

路由的使用

路由重定向

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
相关推荐
布列瑟农的星空6 分钟前
什么?sessionStorage可以跨页签?
前端
苏打水com7 分钟前
网易前端业务:内容生态与游戏场景下的「沉浸式体验」与「性能优化」实践
前端·游戏·性能优化
恋猫de小郭9 分钟前
React 和 React Native 不再直接归属 Meta,React 基金会成立
android·前端·ios
掘金安东尼14 分钟前
前端周刊434期(2025年9月29日–10月5日)
前端·javascript·面试
brzhang18 分钟前
当我第一次看到 snapDOM,我想:这玩意儿终于能解决网页「截图」这破事了?
前端·后端·架构
掘金安东尼24 分钟前
前端周刊433期(2025年9月22日–9月28日)
前端·javascript·github
井柏然27 分钟前
为什么打 npm 包时要将 Vue/React 进行 external 处理?
javascript·vite·前端工程化
万少35 分钟前
我的HarmonyOS百宝箱
前端
江城开朗的豌豆41 分钟前
uni-app弹层遮罩难题?看我如何见招拆招!
前端·javascript·微信小程序
江城开朗的豌豆1 小时前
小程序生命周期漫游指南:从诞生到落幕的完整旅程
前端·javascript·微信小程序