vue中vue-router的使用_vue使用vue-router-CSDN博客

本文链接：https://blog.csdn.net/ct5211314/article/details/124325931

本文详细介绍了Vue Router的基本配置、路由切换、多级路由、命名路由、参数传递、props配置、编程式导航、组件缓存及路由守卫等核心概念，助您快速掌握Vue.js单页应用的路由管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是vue-router

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。

二、使用vue-router

1.配置路由

//新建index.js用于同一管理路由
import Vue from 'vue'
import VueRouter from 'vue-router'

import router1 from './router1.js'
import router2 from './router2.js'
import router3 from './router3.js'
import router4 from './router4.js'


Vue.use(VueRouter)

const routes = [
    ...router1,
    ...router2,
    ...router3,
    ...router4
]

const router = new VueRouter({
    routes:routes
})

router.beforeEach((to, from, next) => {
    // console.log(to, from)
    next()
})

export default router

//创建其他js用于配置路由
const Test = () => import( /* webpackChunkName: "Test" */ '../pages/Test')


const routes = [
    { path: '/', redirect: '/Test' },//路由重定向
    { path: '/Test', component: Test },
    
    // { path: '/Test', component: Test, children:[
    //     { path: '', redirect: 'xxx' },
    //     { path: 'xxx', component: 'xxx' },
    // ] }, //父子路由的写法  <router-view></router-view>去承载子页面
]

export default routes

2.实现路由切换（active-class可配置高亮样式）

<router-link active-class="active" to="/about">About</router-link>

3.指定展示位置

<router-view></router-view>

三、多级路由

1.配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import A from '../views/A.vue'
import B from '../views/B.vue'
import C from '../views/C.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/Home',
  },
  {
    path:'/Home',
    name: 'Home',
    component: Home,
    
  },
  {
    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/About.vue'),
    children:[
      {
        path:'A',
        name:"A",
        component:A,
      },
      {
        path:'B',
        component:B,
      },
      {
        path:'C',
        component:C,
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

2.跳转

<router-link to="/About/B">B组件</router-link>

四、命名路由

用于简化路由的跳转

1.使用--给路由命名

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import A from '../views/A.vue'
import B from '../views/B.vue'
import C from '../views/C.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/Home',
  },
  {
    path:'/Home',
    name: 'Home',
    component: Home,
    
  },
  {
    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/About.vue'),
    children:[
      {
        path:'A',
        name:"A",
        component:A,
      },
      {
        path:'B',
        component:B,
      },
      {
        path:'C',
        component:C,
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

2.简化跳转

<router-link :to="{name:'A'}">A组件</router-link>

五、路由传参

1.路由的query参数传递

（1）普通路由传参

//方式一：跳转并携带query参数，to的字符串写法
<router-link to="/About/B?text=我是B组件默认路由传递的参数&id=666">B组件</router-link>
//方式二：跳转并携带query参数，to的对象写法
<router-link :to="{
        path:'/About/C',
        query:{
          text:'我是C组件默认路由传递的参数',
          id:77
        }
      }">C组件</router-link>

//参数接收
this.$route.query.text
this.$route.query.id

（2）命名路由传参

//命名路由传递参数
<router-link :to="{
        name:'C',
        query:{
          text:'我是C组件默认路由传递的参数',
          id:77
        }
      }">C组件</router-link>

//参数接收
this.$route.query.text
this.$route.query.id

2.路由的params参数

（1）配置路由，声明接收params参数

{
        name:"B",
        path:'B/:text/:id',
        component:B,
      },

（2）传递参数

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

//跳转并携带params参数，to的字符串写法
<router-link :to="`/About/B/${'我是B组件默认路由传递的参数'}/${666}`">B组件</router-link>
//跳转并携带params参数，to的对象写法
<router-link :to="{
        name:'B',
        params:{
          text:'我是B组件默认路由传递的参数',
          id:77
        }
      }">B组件</router-link>

（3）接收参数

this.$route.params.text
this.$route.params.id

六、路由的props配置

让路由组件更方便的收到参数

1.配置路由

{
        path:'C',
        name:'C',
        component:C,
        props($route){
          return {
            id:$route.query.id,
            text:$route.query.text
          }
        }
      }

2.传递参数

 <router-link :to="{
        name:'C',
        query:{
          text:'我是C组件默认路由传递的参数',
          id:77888
        }
      }">C组件</router-link>

3.接收参数

//通过props接收
props:["text","id"],
this.text  this.id

七、编程式路由导航

不借助<router-link>实现路由跳转，让路由跳转更加灵活

1.编程式导航对应方法

this.$router.push() //默认跳转，追加历史记录
this.$router.replace() //替换当前记录
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

2.编程式路由导航的使用

//编程式导航，传递query参数
jumpA(){
      this.$router.push({
        path:'/About/A',
        query:{
          text:'我是A组件默认路由传递的参数',
          id:77888
        }
      })
    }

//编程式导航，传递params参数
jumpA(){
      this.$router.push({
        name:'A',
        params:{
          text:'我是A组件默认路由传递的参数',
          id:77888
        }
      })
    }
//编程式导航，props简化

{
        path:'A',
        name:"A",
        component:A,
        props($route){
          return {
            id:$route.params.id,
            text:$route.params.text
          }
        }
      },

//接收
  props:["text","id"],

八、路由缓存组件

让不展示的路由组件保持挂载，不被销毁。

<keep-alive include="A">//默认都保持挂载，也可以通过include指定挂载组件
      <router-view></router-view>
    </keep-alive>

九、两个新的生命周期钩子

路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

  activated(){
    console.log("组件激活了");
},
deactivated(){
  console.log("组件失活");
}

十、组件路由守卫

对路由进行权限控制，可以进行一些权限判断

1.全局路由守卫

（1）全局前置守卫：初始化时执行、每次路由切换前执行

//to去往那个组件   from来自那个组件   next是否放行
router.beforeEach((to,from,next)=>{
  console.log(to,from);
  next()
})

（2）全局后置守卫：初始化时执行、每次路由切换后执行，不需要放行

router.afterEach((to,from)=>{
  console.log(to,from);
})

2.独享路由守卫

  {
        path:'A',
        name:"A",
        component:A,
        props($route){
          return {
            id:$route.params.id,
            text:$route.params.text
          }
        },
        beforeEnter(to,from,next){
          console.log(to,from);
        }
      },

3.组件内路由守卫

//进入守卫：通过路由规则，进入该组件时被调用    
beforeRouteEnter (to, from, next) {
    console.log("进入组件");
    next()
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
  console.log("离开组件");
  next()
},