vue路由简介和基础使用

目录

1、Vue Router介绍

2、案例介绍

2.1 需要安装哪些包

2.2 布局 

3.3 vue-router使用

3.4 axios的使用 

3.5 其它

---

#博学谷IT学习技术支持#

1、Vue Router介绍

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻

而易举。

前端路由作用: 实现业务场景切换

优点：

• 整体不刷新页面，用户体验更好

• 数据传递容易, 开发效率高

缺点：

• 开发成本高(需要学习专门知识)

• 首次加载会比较慢一点。不利于seo  

2、案例介绍

 本次利用路由实现下面的移动端的案例：

 

2.1 需要安装哪些包

vue脚手架就不用介绍了

这里用的是vue2版本

安装：vue-router 这里安装版本3的

yarn add vue-router@3.0.6

下载axios包

下载vant2包 

2.2 布局 

在vant中找到对应的组件，通过按需引入组件，完成页面的布局

这里看一下底部布局：

<template>
  <div class="main">
    <van-nav-bar :title="activeTitle" fixed />
    <!-- 路由模式 -->
    <van-tabbar route>
      <van-tabbar-item replace to="/home" icon="home-o">主页</van-tabbar-item>
      <van-tabbar-item replace to="/study" icon="guide-o">学习中心</van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="user-circle-o">我的</van-tabbar-item>
    </van-tabbar>
    <!-- 一级路由挂载点 -->
    <router-view />
  </div>
</template>

 对应的就是下图：

 现在我们需要路由进行页面的切换

3.3 vue-router使用

在src下创建一个routes文件夹,然后在创建两个js文件

如下;

1. 在routes.js文件下，主要是创建规则数组

//导入组件  路由跳转后进入的页面
import Home from "@/views/Home"
import Study from "@/views/Study"
import My from "@/views/My"
//定义规则数组
const routes = [
    {
        path: "/",
        //重定向
        redirect: "/home"
    },
    {
        path: "/home",
        component: Home,
        meta: {
            title: "首页"
        }
    },
    {
        path: "/study",
        component: Study,
        meta: {
            title: "学习中心"
        }
    },
    {
        path: "/my",
        component: My,
        meta: {
            title: "我的"
        }
    }
]
export default routes

在index.js文件下：

import routes from "./routes"
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)
const router = new VueRouter({
    routes
})
export default router

最后在main.js下关联到vue实例

那么路由就创建好了

总结一下：

 路由的使用也就下面几步

 3.4 axios的使用 

这个看文档就行

request.js:

//导入axios
import axios from 'axios'
//准备接口的基本路径，以后就不用写了
axios.defaults.baseURL = 'http://toutiao.itheima.net';
//导出
export default axios

在api文件下，就是写请求了：

import request from '@/utils/request'
export const getList = () => {
    return request({
        url: '/v1_0/user/channels',
    })
}

3.5 其它

关于其他的细节自己区vant2文档了解就好