admin管理员组

文章数量:1633930

项目搭建

vue-router的安装

一、用脚手架vue-cli基于webpack模板搭建vue项目的时候，在项目配置中选择使用vue-router，即 Install vue-router? Yes (推荐使用)

二、进入到项目根目录，运行命令 npm install vue-router 回车

路由使用实例

路由组件和非路由组件

组件可以分为两类，路由组件和非路由组件。上面图片中的侧边栏就是3个路由组件，而右边的则是非路由组件。

以使用第一种方法安装的vue-router为例，安装好项目文件夹的目录结构应该是这样的：

下面文章的重点主要是围绕src文件夹进行。

创建路由组件文件夹

路由组件文件夹的名称通常为 views 或 pages，看个人喜好，不做强制要求。文件路径放在src文件夹下面。

创建路由组件

根据上面的图片，我们可以知道，一共有3个路由组件，所以我们在views文件夹下创建3个.vue文件。
分别取名RouterA、B、C。内容基本一致。

配置路由

路由组件文件创建好之后，我们就要开始进入到路由器文件中进行路由配置，这里说的有点绕，先脑补一下这个概念，一个路由对应一个路由组件，很多个路由组成了路由器。

操作方法：
进入到router文件夹下面，打开里面的index.js文件，编写代码。
index.js文件

import Vue from 'vue' //引入vue
import Router from 'vue-router' //引入路由
//引入自定义的路由组件
import RouterA from '../views/RouterA.vue'
import RouterB from '../views/RouterB.vue'
import RouterC from '../views/RouterC.vue'
//使用路由插件,这个一定要记得写
Vue.use(Router)
//配置路由器
export default new Router({
    //默认暴露，在引入的时候可以使用任何名字
  //n个路由，数组中的每个对象代表一个路由
  //每个路由都有path属性和component属性
  routes: [{
   
    path: '/routera',
    component: RouterA //注意，这里不是字符串，要和import后面的名称保持一致
  }, {
   
    path: '/routerb',
    component: RouterB
  }, {
   
    path: '/routerc',
    component: RouterC
  }, {
   
    //这个是个特别的路由，当我们请求根路径的时候，它就会重定向请求到routera路由
    //相当于设置默认路由（页面）
    path: '/',
    redirect: './routera'
  }],
  //路由配置好之后，还需要去到入口文件main.js文件中
  //在创建Vue实例的时候去配置路由器：即引入路由器，
}

本文标签： 侧边路由简单vue

版权声明：本文标题：【Vue】Vue路由的基本使用--简单侧边栏的实现 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1729177875a1188947.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。