Vue.js (包含2.x和3.x) 总结04 （生命周期的钩子函数、路由导航、重定向、多级路由）-CSDN博客

import Vue from 'vue'
import VueRouter from 'vue-router'
//引入
import OneDemo from '@/views/OneDemo.vue'
import TwoDemo from '@/views/TwoDemo.vue'
import ThreeDemo from '@/views/ThreeDemo.vue'
import FourDemo from '@/views/FourDemo.vue'

Vue.use(VueRouter)  //vue中使用路由

const routes = [
    //  配置路由规则
  {
    path: '/',   // url路径
    name: 'OneDemo', // 给当前组件起个名字
    component: OneDemo // 所关联的组件
  },
  {
      path: '/bbb', 
      name: 'TwoDemo',
      component: TwoDemo
  },
  {
      path: '/ccc',
      name: 'ThreeDemo',
      component: ThreeDemo
  },
  {
      path: '/ddd',
      name: 'FourDemo',
      component: FourDemo
  }
//   {
//     path: '/about',
//     name: 'about',
//     // route level code-splitting
//     // this generates a separate chunk (about.[hash].js) for this route
//     // which is lazy-loaded when the route is visited.
//     component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
//   }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3、路由导航

通过点击路由导航就可以达到页面切换的效果

1）声明式导航

就是类似于标签的方式，常用于用户需要点击跳转的,本质是a标签

router-link 完成页面跳转，里面有一个to属性设置跳转路径

选中样式类

在声明式导航中，vue会自动给选中的页面加一个类名

<template>
  <div id="app">
    <nav>
      <router-link to="/">AAA</router-link> |
      <router-link to="/bbb">BBB</router-link> |
      <router-link to="/ccc">CCC</router-link> |
      <router-link to="/ddd">DDD</router-link> 
    </nav>
    <router-view/>  //一级路由出口
  </div>
</template>

<style>
.router-link-exact-active{background-color: brown;}
</style>

2）编程式导航

就是类似于js的方式，常用于自动完成跳转

this.$router.push（“/去哪里”）//跳转页面 window.location.href

this.$router.replace('/去哪里') //替换当前页面

this.$router.go(+数-数) //正数前进负数后退

4、重定向

重（重新）定（定位）向（方向）

在router文件夹下的index.js中

  // 重定向
  {
    path: '/',  //url路径
    // 重新定位到某个地址
    redirect:"/xxx"
  }

5、404页面

错误提示页面，404页面必须在所有规则的最下面

在router文件夹下的index.js中

// 404页面必须在所有规则的最下面
  {
    path: '*',  //url路径
    name: 'Nocom', //就是给当前配置起个名字
    component: Nocom  //关联的组件
  }

6、多级路由

就是在一级页面中嵌套局部页面切换，多级路由

1.创建路由页面（写在views下）例如：

2.配置路由规则（必须在对应的一级路由规则中，使用children关键字进行配置）

import Vue from 'vue'
import VueRouter from 'vue-router'
import OneDemo from '@/views/OneDemo.vue'
import TwoDemo from '@/views/TwoDemo.vue'
import ThreeDemo from '@/views/ThreeDemo.vue'
import FourDemo from '@/views/FourDemo.vue'

// 引入二级路由
import Era from '@/views/er/ErA.vue'
import Erc from '@/views/er/ErC.vue'
import Erd from '@/views/er/ErD.vue'

Vue.use(VueRouter)  //vue中使用路由

const routes = [
    //  配置路由规则
  {
    path: '/aaa',   // url路径
    name: 'OneDemo', // 给当前组件起个名字
    component: OneDemo ,// 所关联的组件
    children:[ // 配置二级路由
        {
            path: '/era',
            name: 'Era',
            component: Era
        } ,
        {
            path: '/erc',
            name: 'Erc',
            component: Erc
        } ,
        {
            path: '/erd',
            name: 'Erd',
            component: Erd
        }
    ]
  },
  {
      path: '/bbb', 
      name: 'TwoDemo',
      component: TwoDemo
  },
  {
      path: '/ccc',
      name: 'ThreeDemo',
      component: ThreeDemo
  },
  {
      path: '/ddd',
      name: 'FourDemo',
      component: FourDemo
  },
  {
    path:'/',
    redirect:'/aaa'
  }

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

export default router

3.设置路由出口

在对应的一级路由页面中加入路由出口

<template>
  <div>
    AAA
    
    <div>
        <router-link to="/era">二A</router-link>
        <router-link to="/erc">二C</router-link>
        <router-link to="/erd">二D</router-link>
    </div>
    <!-- 二级 路由出口 -->
    <router-view></router-view>
  </div>
</template>

小扩展 二级路由路径设置

在设置多级路由时，path路径加/，那么在路由导航中，to属性就是 /二级路由

在设置多级路由的时，path路径不加/ ，那么在路由导航中，to属性就是 /一级路由/二级路由