【Vue】Vue-Router2 实现路由功能

最新推荐文章于 2024-01-28 16:51:17 发布

彩笔_小qing

最新推荐文章于 2024-01-28 16:51:17 发布

阅读量832

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vuejs 文章标签： vue VueRouter 路由懒加载嵌套路由

本文链接：https://blog.youkuaiyun.com/qq_31164127/article/details/78249458

本文介绍了如何在Vue2.0项目中使用Vue-Router2进行路由配置，包括安装、引入组件、定义路由、懒加载以及路由信息对象的使用。通过示例展示了路由懒加载的实现方式，帮助理解路由在单页面应用中的优化作用。同时，提到了路由记录、查询参数等关键概念，并提供了官方文档链接以获取更详细的Vue-Router2信息。

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

注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。
在前面文章 vue-cli基础上，开始介绍。安装vue-cli时已经将vue-router安装，若还没有安装，可通过npm

npm install vue-router

一、使用路由

在main.js中，需要明确安装路由功能：

import Vue from ‘vue’
import VueRouter from ‘vue-router’
import App from ‘./App.vue’
Vue.use(VueRouter)

1.引入定义好的组件

import Compos from ‘./components/compos/compos.vue’;
import Version from ‘./components/version/version.vue’;

项目结构如下图：

这里写图片描述

2.定义路由

routes: [
    {
      path: '/', // 默认打开version路由（重定向）
      redirect: '/version'
    },
    {
      path: '/version',
      name: 'version',
      component: Version
    },
    {
      path: '/compos',
      name: 'compos',
      component: Compos,
      redirect: to => {
        if (to.path === '/compos') {
          return '/compos/ok-input';
        }
      },
      children: [ // 子路由（参数路由）
        {path: ':id', name: 'child'}
      ]
    }
  ]

3.创建 router 实例，然后传routes 配置

const router = new VueRouter({
  routes,
  linkActiveClass: 'active' // 路由active状态
});

4.创建和挂载根实例。通过router配置参数注入路由，从而让整个应用都有路由功能。

new Vue({
  el:

最低0.47元/天解锁文章

200万优质内容无限畅学