VUE之路由基础

目录

1、什么是路由

2、为什么要用路由

3、路由基础

（1） 下载安装

（2）快速入门

---

1、什么是路由

路由Router，描述了不同的请求和对应的处理函数之间的映射关系

• 接收用户请求的url地址
• 映射规则: url地址 对应一个处理函数
• 调用处理函数

总结：英语单词router，表示了根据映射规则，分发用户请求到不同的业务模块，执行业务流程的过程

2、为什么要用路由

路由在项目中的功能主要是根据用户url请求路径的不同，切换不同的页面的！

原因：

① 动态组件切换页面，无法通过浏览器url路径切换

② 动态组件设置自定义属性和监听自定义事件比较繁琐

③ 页面出现二级页面时，动态组件的切换方式不太友好

总结：因为动态组件实现页面切换，无论是开发中还是在实际使用中，代码过于繁琐，同时对于系统资源消耗较大；所以要使用路由来完成页面切换的功能！

3、路由基础

（1） 下载安装

创建vue2.x项目

vue create app01

进入项目，执行命令下载安装路由模块

cd app01

npm i vue-router@3 -s   版本3

总结：路由本质上就是一个独立模块，直接按照node。js模块的安装方式进行安装

（2）快速入门

①创建路由视图组件

出现了vue-router路由模块后，通过路由切换的页面组件，称为路由视图组件

②配置路由映射规则

创建规则配置文件：src/router/index.js

分为四步：引入依赖、挂载插件、创建映射规则、创建路由对象、导出路由

//规则配置文件

//引入依赖
import Vue from "vue"
import VueRouter from "vue-router"

//挂载插件
Vue.use(VueRouter)

import Home from '../pages/Home'
import List from '../pages/List'
import Ucenter from '../pages/Ucenter'
import About from '../pages/About'

//创建映射规则
const routes = [
{
    path:'/home',   //配置用户访问url路径
    component:Home   //url路径要访问的页面组件
},
{
    path:'/list',    //配置用户要访问的url路径
    component:List    //url路径要访问的页面组件
},
{
    path:'/ucenter',
    component:Ucenter
},
{
    path:'/about',
    component: About
}

//创建路由对象
const router = new VueRouter({
    routes
})

//导出路由
export default router

 指定显示路由页面的地方：编辑App.vue,添加显示路由组件的代码：

<template>
    <div id="app">
        <h2>入口模块，vue-router路由</h2>
        <!--指定显示路由组件的位置-->
        <router-view></router-view>
    </div>
</template>

③添加/注册/挂载路由规则

编辑运行入口模块：src/main.js，添加路由对象

(1)引入 import router from './router/index'   //引入路由模块
(2)挂载/注册/添加路由

④ 拓展：添加路由导航链接

<template>
  <div id="app">
    <!-- 路由导航：本质上就是一个超链接-->
    <ul>
      <!-- vue-router提供了一种固定语法，用于添加导航链接-->
      <li><router-link to="/home">首页</router-link></li>
      <li><router-link to="/list">列表</router-link></li>
      <li><router-link to="/ucenter">用户</router-link></li>
      <li><router-link to="/about">关于我们</router-link></li>
    </ul>
    <!-- 指定显示路由组件的位置 -->
    <router-view></router-view>
  </div>
</template>