路由的使用
路由重定向
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