Vue 路由（vue-router）

最新推荐文章于 2025-10-17 19:06:58 发布

原创最新推荐文章于 2025-10-17 19:06:58 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了前端路由的概念及其工作原理，包括路由配置、组件展示、参数传递等关键知识点，并探讨了后端路由的区别。

路由

理解：一个路由（route）就是一组映射关系（key-value），多个路由需要路由器（router）进行管理。
前端路由理解：key是路径，value是组件，用于展示页面的内容。
前端路由工作流程：当浏览器的路径改变时，对应的组件就会展示。
后端路由理解：key是路径，value是function，用于处理客户端提交的请求。
后端路由工作流程：服务器接收到一个请求时，根据请求路径找到匹配函数处理请求，返回响应数据。

基本使用

安装vue-router，命令：npm i vue-router
应用插件：Vue.use(VueRouter)
编写router配置项：

// 引入VueRouter
import VueRouter from 'vue-router';
// 引入路由组件
import About from '../components/About';
import Home from '../components/Home';

// 创建router实例对象，管理一组一组的路由规则
const router = new VueRouter({
 routes: [
   {
     path: '/about',
     component: About
   },
   {
     path: '/home',
     component: Home
   }
 ]
})

// 暴露router
export default router

4.实现切换（active-class可配置亮度样式）

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

5.指定展示位置

<router-view></router-view>

几个注意点

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
通过切换，“隐藏”的路由组件，默认是被销毁的，需要的时候再去挂载。
每个组件都有自己的$route属性，里面存储着自己的路由信息。
整个应用只有一个router，可以通过组件的$router属性获取到。

多级路由

配置路由规则，使用children配置项：

// 创建router实例对象，管理一组一组的路由规则
const router = new VueRouter({
 routes: [
   {
     path: '/about',
     component: About
   },
   {
     path: '/home',
     component: Home,
     children: [//通过children配置子级路由
       {
         path: 'news', // 此处一定不能写'/news'
         component: News
       }
     ]
   }
 ]
})

跳转（要写完整路径）：

<router-link to="/home/news">News</router-link>

路由的query传参

1.传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link to="/home/news/detail?id=123&title=Hello">跳转</router-link>
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link :to="{
 path: '/home/news/detail',
 query: {
   id: 666,
   title: 'hello'
 }
}">跳转</router-link>

2.接收参数
$route.query.id
$route.query.title

路由命名

1.作用：可以简化路由的跳转。
2.如何使用

1.给路由命名

{
     path: '/demo',
     component: Demo,
     children: [
       {
         path: 'test',
         component: Test,
         children: {
           name: 'hello',
           path: 'weclome',
           component: Hello
         }
       }
     ]
   }

2.简化跳转

	<!-- 简化前，需要写完整的路径 -->
   <router-link to="/demo/test/weclome">跳转</router-link>
   <!-- 简化后，直接通过名字跳转 -->
   <router-link :to="{name:'hello'}">跳转</router-link>
   <!-- 简化写法配合传递参数 -->
   <router-link :to="{
     name: 'hello',
     query: {
       id: 666,
       title: 'hello'
     }
   }">跳转</router-link>
 </div>

路由的param参数

1.配置路由，声明接收param参数

	{
      path: '/home',
      component: Home,
      children: [//通过children配置子级路由
        {
          path: 'news', // 此处一定不能写'/news'
          component: News
        },
        {
       	  name: 'message',
          path: 'message/:id/:title', // 使用占位符声明接收param参数
          component: Message
        }
      ]
    },

2.传递参数

    <!-- 跳转并携带params参数，to的字符串写法 -->
    <router-link to="/home/message/detail/123/hello">跳转</router-link>
    <!-- 跳转并携带params参数，to的对象写法 -->
    <router-link :to="{
      name: 'message',
      params: {
        id: 666,
        title: 'hello'
      }
    }">跳转</router-link>

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

3.接收参数
$router.params.id
$router.params.title

路由的props配置

作用：让路由组件更方便的收到参数。

    {
      name: 'demo',
      path: '/demo',
      component: Demo,
      // 第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传递给Demo组件
      // props: {a:99}
      // 第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传递给Demo组件
      // props: true
      // 第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传递给Demo组件
      props(route) {
        return {
          id: route.query.id,
          title: route.query.title
        }
      }
    }

`<router-link>`的replace属性

1.作用：控制路由跳转时操作浏览器历史记录的模式。
2.浏览器的历史记录有两种写入方式：分别是push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时候默认是push。
3.如何开启replace模式：<router-link replace ....>News</router-link>

编程式路由导航

1.作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活。
2.具体编码：

//$router的两个API
this.$router.push({
	name: 'demo',
	params: {
		id: 666,
		title: 'hello'
	}
})
this.$router.replace({
	name: 'demo',
	params: {
		id: 666,
		title: 'hello'
	}
})

缓存路由组件

1.作用：让不展示的路由组件保持挂载，不被销毁。
2.具体编码：

<keep-alive include="demo">
  <router-view></router-view>
</keep-alive>

路由的两个生命周期钩子

1.作用：路由组件独有的两个钩子，用于捕获路由组件的激活状态。
2.具体名字

1.activated路由组件被激活时触发。
2.deactivated路由组件失活时触发。

路由守卫

1.作用：对路由进行权限控制。
2.分类：全局路由、独享路由、组件内路由。
3.全局路由

// 全局前置路由，初始化时执行，每次路由切换前执行
router.beforeEach((to, from, next) => {
  if (to.meta.isAuth) { // 判断当前路由是否需要权限控制
    if (localStorage.getItem('name') === 'login') { // 权限控制的具体规则
      next() // 放行
    } else {
      alert('暂无访问权限')
    }
  } else {
    next() // 放行
  }
});

// 全局后置守卫，初始化时执行，每次路由切换后执行
router.afterEach((to,from) => {
  if (to.meta.title) {
    document.title = to.meta.name // 修改网页的title
  } else {
    document.title = 'vue'
  }
});

4.独享路由

    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'news',
          component: News,
          meta: {isAuth:true,title:'新闻'},
          beforeEnter: (to,from,next) => {
            if (to.meta.isAuth) { // 判断当前路由是否需要权限控制
              if (localStorage.getItem('name') === 'news') { // 权限控制的具体规则
                next() // 放行
              } else {
                alert('暂无访问权限')
              }
            } else {
              next() // 放行
            }
          }
        },
      ]
    },

5.组件内守卫

// 进入守卫，通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next) {}
// 在当前路由改变，但是该组件被复用时调用
beforeRouteUpdate(to,from) {}
// 离开守卫，通过路由规则，离开该组件时被调用
beforeRouteLeave(to,from,next) {}