Vue.js-Day05【安装路由(vue-router)、如何使用vue-router、404配置、激活class、动态路由、编程式导航、路由嵌套、路由元信息、导航拦截】
Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】
目 录
1、单页面应用
1.1、多页面应用
1.2、单页面应用
1.3、vue-router
2、安装vue-router
2.1、Install vue-router
2.2、生成目录介绍
2.2.1、main.js
2.2.2、router/index.js(路由的配置文件)
2.2.3、App.vue
2.3、路由示意图
2.4、组件分类
3、如何使用vue-router
4、404配置
5、激活class
6、动态路由
6.1、动态路由实现
7、编程式导航
8、路由嵌套
8.1、“路由嵌套”定义
8.2、“路由嵌套”实现
9、路由元信息
10、导航拦截
【AM:1~3】======【PM:4~10】
1、单页面应用
1.1、多页面应用
一个网址对应一个页面资源。
跳转一个页面需要重新加载整个页面的资源,页面跳转会刷新!
seo优化好。
1.2、单页面应用
整个网站只有一个页面,网站内部通过相关手段展示不同的内容。
页面的跳转是使用js 实现-->判断路径的变化,去展示不同的组件内容。 页面自始至终都不会刷新!
维护容易; 复用性强;组件缓存; 体验感好;快发速度快;
缺点:首屏加载慢,不利于seo优化!
1.3、vue-router
如何管理这些 路径跳转和组件页面之间的关系呢? /index 怎么就知道 是首页组件? 怎么就展示首页组件呢?所以Vue生态圈里面 有一个官方的管理 路径跳转和组件页面之间关系的 插件, 叫做vue-router。
2、安装vue-router
2.1、Install vue-router
vue init weppack 项目名 初始化项目的时候 选择安装vue-router即可。
? Install vue-router? (Y/n) // 选择输入y
2.2、生成目录介绍
2.2.1、main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' // 导入 同级目录下面的router文件加下面的index.js文件模块Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router, // 这里将路由模块挂载到Vue上面去!components: { App },template: '<App/>'
})
2.2.2、router/index.js(路由的配置文件)
import Vue from 'vue' // 导入Vue
import Router from 'vue-router' // 导入Vue-Routerimport HelloWorld from '@/components/HelloWorld' // 导入components下面的HelloWrold组件// @ 表示 src目录
// Vue安装Vue-Router插件!
Vue.use(Router)// export default 对象 暴露某个对象出去!
export default new Router({routes: [ // 路由映射关系数组! 路由映射: 什么地址展示什么组件!{path: '/', component: HelloWorld}]
})
2.2.3、App.vue
<template><div id="app"><!-- router-view是视口组件! 表示路由对应的地址的组件 展示输出的地方! --><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
2.3、路由示意图
2.4、组件分类
组件分为两种:
一种是路由的页面组件(如:首页、分类、列表页) 通常放在pages目录下。
一种是零件组件(如:轮播组件、tab切换组件、头部组件、底部组件) 通常放在components目录下。
3、如何使用vue-router
第1步: 安装vue-router【? Install vue-router? (Y/n) // 选择输入y】
第2步: 在src目录下面创建pages目录,在里面书写好需要使用到的组件,如index.vue、menu.vue、car.vue 等。
第3步: 修改 router/index.js 文件。
import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)
import Index from "../pages/Index.vue"
import Menu from "../pages/Menu.vue"
import Car from "../pages/Car.vue"export default new Router({linkExactActiveClass:"on", // 激活的class 如果当前页面的地址和a的地址相同,该a标签就有该class值routes: [ {path: '/', // 表示访问的地址component: Index // 该地址展示的组件!},{path:"/menu", component: Menu },{ path: "/car",component: Car},]
})
第4步: 删除App.vue 里面的那个router-view 上面的img标签。
第5步: 地址栏输入 /就可以展示Index组件, 输入/menu 就可以展示Menu组件。
第6步: 如果想实现a链接点击跳转,在任意一个页面组件里面使用。
<router-link to="path地址">文字</router-link> // 编译成a标签,点击就可以进入对应的地址
4、404配置
默认情况下如果打开一个不存在的路由地址,页面的router-view不会显示任何内容。
实际开发的时候,往往会配置404页面。
routes: [...,{path: "*",component: "404的页面组件"}
]
注意:404的映射配置往往放在最下面!
5、激活class
如果当前的路由地址和我们的a标签的href地址相同,我们应该将a标签激活。
export default new Router({linkExactActiveClass:"class值", // 激活的class 如果当前页面的地址和a的地址相同,该a标签就会有这个class值routes: []
})
6、动态路由
新闻列表=(传递新闻的id)=>新闻详情
商品的分类=(传递分类的id)=>商品的列表=(商品的id)=>商品详情
多级关系页面之间需要传递数据。
6.1、动态路由实现
// 路由配置
routes:[...{path: "/地址/:变量",component: "组件A"}...
]
// 上一级页面
<router-link to="/地址/数据1">去组件A </router-link>
<router-link to="/地址/数据2">去组件A </router-link>
$:加符号,区分不同的变量。解决“命名冲突”问题。
// 组件A 里如何获取传递进入的数据呢?this.$route.params.变量 // 可以获取到数据1,数据2// this.$route 表示当前的路由地址信息
7、编程式导航
就是使用JS控制 路由的跳转。
this.$router.back() 返回上一页
this.$router.push("path地址")
this.$router表示当前项目的路由对象!
8、路由嵌套
8.1、“路由嵌套”定义
什么是嵌套路由。网站开发的时候,很多模块属于某个模块子模块,且展示的内容应该在某个模块底下去展示。
如上图中,“研究生教育、本科生教育、国际教育、继续教育”这些都是人才培养模块下面的信息,他们的内容,应该展示在人才培养页面的 里面的右侧灰色额部分,而不是顶级路由的展示区域。
8.2、“路由嵌套”实现
...
import Rcpy from "../pages/Rcpy.vue"
import Bks from "../pages/jiaoyu/Bks.vue"
import Yjs from "../pages/jiaoyu/Yjs.vue"
import Jxjy from "../pages/jiaoyu/Jxjy.vue"
import Gjs from "../pages/jiaoyu/Gjs.vue"
...export default new Router({linkExactActiveClass:"on", // 激活的class 如果当前页面的地址和a的地址相同,该a标签就会有这个class值routes: [ ...{path: "/rcpy",component: Rcpy,children:[ // children 表示当前路由的子路由!{ path: "bks", component: Bks }, // /rcpy/bks 渲染 Bks 到 Rcpy 组件里面的router-view { path: "yjs", component: Yjs }, // /rcpy/yjs 渲染 Yjs 到 Rcpy 组件里面的router-view{path: "jxjy",component: Jxjy}, // 同上{path: "gjs", component: Gjs}, // 同上]},...]
})
二级路由需要配置在一级路由的children选项里面, 且二级路由的页面组件不会展示在App.vue里面的router-view标签处, 而是展示在对应一级路由页面组件里面的router-view中。 如上例子中的Bks、Yjs等,这些组件是展示在 Rcpy组件里面的router-view中。
注意点: 子路由的path地址前面不能加/
9、路由元信息
给每个路由页面都传递一些数据,如网页标题!【是否有权限!】
routes: [{path: "地址",meta: { 自定义数据 }component: "组件"}
]
获取 this.$route.meta.数据
10、导航拦截
单页面应用无法设计标题! 进入页面之前判断一下是否有权限!
...
var router = new Router({ ... })
// 导航前置守卫! 所有的路由进入之前都会执行这个函数!
router.beforeEach(function(to,from,next){// to 表示要去的路由信息// from 表示来的路由信息// next 中间函数, 只有调用了next函数,路由真的进入下一个页面document.title = to.meta.title // 设置标题!next();
})
多谢观看~
Vue.js-Day05【安装路由(vue-router)、如何使用vue-router、404配置、激活class、动态路由、编程式导航、路由嵌套、路由元信息、导航拦截】相关推荐
- VUE基本使用---安装、开始使用介绍、Vue实例、模板语法、计算属性和侦听器、class与style绑定
原文在我的博客:https://www.liboer.top/articles/detail/vue-BasedUse/ 文章目录 VUE.js 基础 安装 CDN 下载 安装 命令行工具(CLI脚手 ...
- 关于node.js 和vue.js的安装、卸载、浏览器测试问题?
关于node.js 和vue.js的安装.卸载.浏览器测试问题? 最近忙于深入研究vue.js框架的适用问题,所以顺带也有必要系统的研究一下node.js是怎么一回事?! 闲话不多说,直接上文章链接: ...
- Vue.js 3.0 学习笔记(十一)Vue Router路由
一.使用Vue Router 1.HTML页面使用路由 <!DOCTYPE html> <html> <head><meta charset="UT ...
- [Vue.js] 基础 -- 安装Vue
安装 Vue 版本说明 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有兼容 ECMAScript 5 的浏览器 直接用 &l ...
- 【Vue.js】Vue.js中常用的UI组件库和Vue Router
1.Vue生态中常用的UI组件库 1. vant 介绍 轻量级.可靠的移动端 Vue 组件库 有赞前端团队出品 GitHub地址:https://github.com/youzan/vant 特性 拥 ...
- vue.js环境安装
1.到官网(http://nodejs.cn/download/)下载Node.JS运行环境并安装(由于现在的Node中自带npm包管理器,所有就不需要额外下载npm了) 2.如果是新手,那么建议以引 ...
- idea vue.js插件安装
Vue.js for IntelliJ IDEA-based IDEs This plugin provides support for Vue.js in IntelliJ IDEA Ultimat ...
- vue js 对象下的原型_如何使用Vue.js和Pusher创建实时原型反馈应用程序
vue js 对象下的原型 by Neo Ighodaro 由新Ighodaro 如何使用Vue.js和Pusher创建实时原型反馈应用程序 (How to create a realtime pro ...
- Vue.js 入门指南之“前传”(含sublime text 3 配置)
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的"入门",就算是"入门指南&quo ...
- Vue.js学习总结(1)——Windows下Vue.js开发环境搭建
Vue.js是一套构建用户界面的 "渐进式框架".与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已 ...
最新文章
- blockquote 引用的分析
- 004_Jsp九大内置对象
- supmap java_SuperMap iServerJava安装与出图必读之Windows操作系统篇
- 改进的SVN的Commit权限控制
- 爬虫从入门到放弃 - 纯新手学习-爬虫基本原理
- php 获取 uri,获取URI地址
- sqlserver mysql时间格式化_SqlServer时间格式化
- Java使用自定义包
- python中函数包括参数函数吗_Python中的函数---函数的定义和参数
- c语言程序设计自学跟谁好,双辽c语言编程学习,双辽学c语言编程哪个好,双辽学c语言编程自学好还是报班好...
- 2020年——1024
- centos 上安装bugzilla 详解
- vim个性化设置---给脚本文件加注释头信息
- android在体检报告叫什么,体检报告检测分析app
- 钛资本研究院:医疗人工智能与未来医院信息化建设
- 西藏拉姆拉错:蓝蓝的湖水
- u盘 安装win11 提示找不到 install.wim 文件 解决方法
- 静态图片怎么做成gif图?如何将静态图做成动态图
- 朋友圈集赞万能截图生成器威信小程序源码下载
- B1031. 查验身份证
热门文章
- vue中headers是什么_【vue】饿了么项目-header组件开发
- java 返回值void_Java的返回值voidspeak
- 三、HDFS中的Python 和JavaAPI
- 八十一、Python | Leetcode 二叉树系列(下篇)
- django连接数据库和数据迁移
- 简单php不用mysql_简单的PHP / MySQL不工作
- AI工程师面试凭高频问题提前准备,命中率会是多少?
- 清华大学王晨阳:轻量级Top-K推荐框架及相关论文介绍
- 近期有哪些值得读的推荐系统论文?来看看这份私人阅读清单
- Self-Orthogonality Module:一个即插即用的核正交化模块