第十一章：vue路由配置01基础

第十一章：vue路由配置01基础

第十一章：vue路由配置01基础

回顾：

动态组件：< component :is=‘’>

keep-alive include exclude max

插槽：

匿名插槽 default

具名插槽

作用域插槽

v-slot:name=‘obj’ # < template>

自定义指令：directive

局部:directives 当前组件范围内

对象式：对象的名字就是指令的名字

bind(), 当指令跟DOM元素绑定的时候

inserted(),当DOM元素插入结构中的时候

update()当数据发生更新时执行

函数式：函数的名字就是指令的名字

全局:main.js中 Vue.directive

渲染：

本章任务

掌握vue路由配置的基本操作姿势

本章内容

理解路由的作用掌握一级路由的配置方法掌握二级路由(嵌套路由)的配置方法掌握路由传参的使用方法

一、路由

举个栗子：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JrteIv8T-1655272924474)(assets/image-20220226140815179.png)]

对来说路由器：路由就是 一个路由接口对应一台终端设备。key===value

< component :is=‘aaa’>aaa === AAA.vue

< iframe name=‘aaa’ > < a href=“独立的 html 页面” target=‘aaa’>

1.1 什么是路由

Vue Router 是 ​​Vue.js​​ 官方的路由管理器。Vue.js 路由允许我们通过不同的 URL 访问不同的内容。根据 url 锚点路径，在容器中加载不同的模块，本质作用是做页面导航。

路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为前端路由和后端路由

后端路由是由服务器端进行实现，并完成资源的分发.概念: 根据不同的URL请求,返回不同的内容本质: URL请求地址与服务器资源之间的对应关系前端路由是依靠hash值(锚链接)的变化进行实现概念: 根据不同的事件显示不同的页面内容,即事件与事件处理函数之间的对应关系.前端路由主要做监听事件并分发执行事件处理函数

路由：实际上就是一组对应关系。

一个路径对应一个路由组件。 这个路径表示的仅仅是纯前端级 组件跳转。类似于锚点。

1.2 为什么要用路由

主要目的：就是为了开发SPA应用

SPA: single page web application。单页​​Web​​应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 [1] 浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

速度：更好的用户体验，让用户在web app感受native app的速度和流畅，

·MVVM：经典MVVM开发模式，前后端各负其责。

·ajax：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交。

·路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）（单页面应用开发）

一种特殊的Web应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML（采用的是div切换显示和隐藏），从而实现UI与用户的交互

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SuaeCTGo-1655272924476)(assets/image-20220225221554642.png)]

1.3 路由的工作原理

路由渲染的本质其实是超链接锚点：通过​​location.href​​​可以获取到当前的路径地址，通过​​location.hash​​​可以获得锚点的名字内容，也就是​​#name​​ 。

这就意味着，我们要实时的监听浏览器地址栏中的内容，只要地址栏的内容发生了改变，我们就要获取到 地址栏中末尾位置的路径地址 然后根据这个路径地址 来渲染出不同的组件。需要监听事件​​onhashChange​​ 只要地址发生改变 这个事件就可以触发。

1.4 路由的使用和配置

路由官网

​​/ CDN

CDN:vue-router.js 库来引入路由功能模块

NPM

安装路由 vue2.x版本对应 vue-router3 vue3.x对应vue-router4​​​npm install vue-router@3/@4​​

1.4.1 路由的配置

安装在src目录下创建router文件夹，并在其内创建index.js作为vue路由功能模块js文件

//1.导入vue和vue-router模块import Vue from 'vue'import VueRouter from 'vue-router'//使用路由模块 注册路由模块Vue.use(VueRouter)//2.导入我们自己需要的组件 路由组件import Student from '../views/Student.vue'//import Subject from '../views/Subject.vue'//3.配置路由规则 映射关系/对应关系const routes = [ { path: '/stu', component: Student }, { path: '/sub', component: ()=>import('../views/Subject.vue') },]//4.创建路由器对象,向外暴漏export default new VueRouter({ routes})

在main.js入口文件中实例化vue对象，并注册路由

import Vue from 'vue'import App from './App.vue'//导入路由import router from './router/index.js'Vue.config.productionTip = falsenew Vue({ router,//注册路由 render: h => h(App)}).$mount('#app')

在页面定义导航和路由出口

通过​​< router-link to="/路径">< /router-link>​​标签配置路由导航

通过​​< router-view>< /router-view>​​标签渲染组件把这个标签写在要渲染组件的位置就可以了。

注意： 路由的切换会导致组件销毁，如果不想销毁可以参考使用 ​​keep-alive​​

注意： 此时在路由渲染的组件中添加mounted生命周期钩子 打印输出this 会发现 vue组件实例对象上多出两个属性：

​​$route​​​ 和 ​​$router​​

​​$route​​​ 指的是当前路由组件的配置相关的信息(参数对象)，​​$router​​指的是整个路由器对象 （导航对象）

1.4.2 路由重定向 redirect

当我们打开项目访问页面时，访问的路径是根路径 ​​是一个单独的​​/​​​ ，路由中并没有与之对应的匹配规则，所以此时我们可以设置​​redirect​​属性 来作为路由打开时 默认访问的组件页面。

//redirect 用来配置重定向 //当访问 / 时 会把路径重定向到 stu { path: '/', redirect: "sub" },

1.4.3 二级路由(嵌套路由)/多级路由

注意： 二级路由，path分配，前面不要有 /

#二级路由配置routes:[ { path:'/home', children:[ //redirect 重定向 通过这个属性可以设置 默认展示的子路由组件 {path:"/",redirect:"list"}, {path:'tv',component:()=>import('./../components/tv.vue')}, {path:'music',component:()=>import('./../components/music.vue')} ] }]#在一级路由组件模版中定义二级路由导航和路由出口tv

1.5 动态路由匹配（路由传参）

1.5.1 参数传递一 （​​:​​ 传递参数）

**简介：**我们经常需要把某种模式匹配到的所有路由，全都映射到一个同样的组件。例如，我们有一个​​StudentInfo​​组件，对于所有 ID学号 各不相同的学生，都要使用这个组件来渲染学生信息。

把hash地址中可变的部分定义为参数项，可以提高路由的可复用性。我们可以在 ​​vue-router​​​ 的路由路径中使用“动态路径参数”来达到这个效果，使用​​:​​表示动态路由参数。

学生一学生二学生三学生四注意：此时 只要是goods下的地址都会被路由映射到 路由规则的goods选项节点下去匹配 { path: '/Student', component: Student, children:[ {path:'stu/1',component:StuInfo}, {path:'stu/2',component:StuInfo}, {path:'stu/3',component:StuInfo}, {path:'stu/4',component:StuInfo}, ] },此时路由规则可以这样定义，但是太麻烦了，每一个都要对应一个路由规则，此时可以采用一下对应规则

index.js中的路由规则：

const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: 'stu/:id', component: StuInfo } ]})

此时我们可以在​​StuInfo​​组件中接收到路由中传递的参数：

当匹配到一个路由时，参数值会被设置到 ​​this.$route.params​​​，可以在每个组件内使用。于是，我们可以更新 学生信息的模板，输出当前用户的 ID：​​< div>User {{ $route.params.id }}< /div>​​

1.5.2 参数传递二 （​​props​​属性传递参数）

给路由开启​​props​​属性

//index.js中的路由配置//添加属性props:true;const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: 'stu/:id', component: StuInfo ,props:true} ]})

​​ StuInfo​​​ 组件中使用​​props​​属性接收参数

export default{ // props:['id'], methods:{ aaa(){ console.log(this) } }}

补充： 注意：上边代码中​​​​标签中的参数 1 一般被叫做路径参数 。我们也有另外一种传递参数的方式，类似于超链接向后台发送请求的参数传递(hash地址传参)， ​​​​ 这种参数传递的方式叫做 查询参数 组件接收数据时 可以使用 ​​$route.query​​来接收。

路由链接处代码：(路由传递参数的写法一)：to属性的字符串拼接式

张三

​​StuInfo​​​组件中代码：可以使用​​$route.query​​接收参数

{{$route.query}}

**路由传递参数的写法二：**to属性的对象式

李四

1.6 命名路由

概念： 在定义路由时 添加一个新的配置项 ​​name​​ 就可以了

​​index.js配置中：​​

{ path: '/Student', //此处给路由添加一个name属性 name:'SSS', component: Student, children:[ {path:'stu/:id',component:StuInfo,props:true} ]},

​​路由链接处:​​​ 通过​​:to​​属性 指定 对应的路由跳转

学生管理

二、总结与作业

总结今日知识点router-link>

### 1.6 命名路由**概念：** 在定义路由时 添加一个新的配置项 `name` 就可以了`index.js配置中：````js{ path: '/Student', //此处给路由添加一个name属性 name:'SSS', component: Student, children:[ {path:'stu/:id',component:StuInfo,props:true} ]},

​​路由链接处:​​​ 通过​​:to​​属性 指定 对应的路由跳转

学生管理

二、总结与作业

总结今日知识点课堂案例

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。