路由的使用

最新推荐文章于 2024-07-28 21:35:25 发布

凛落

最新推荐文章于 2024-07-28 21:35:25 发布

阅读量1k

点赞数 9

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/du_cr/article/details/135701904

版权

本文详细介绍了在Vue应用中如何使用路由进行重定向、自定义链接高亮、实现嵌套页面布局以及命名视图的配置方法，帮助开发者更好地理解和管理VueRouter。

摘要由CSDN通过智能技术生成

路由的使用

路由重定向

redirect

 {
        path: '/',
        // 通过这种方式，在访问/路径的时候会重定向到/login路径
        redirect: '/login'
    },

路由高亮

router-link-active
自定义 linkActiveClass

//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标签

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


//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>

//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