Vue.js前端开发技术 课件第六章 Vue路由

Vue路由初识路由vue路由基础2query方式传参什么是动态路由vue-router基本使用vue-router工作原理路由对象属性params方式传参什么是嵌套路由9什么是命名视图什么是命名路由常用的router的指令初识路由对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；vue-router工作原理SPA(singlepageapplication):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。vue-router使用

path-to-regexp

作为路径匹配引擎，用来匹配path和params单页面应用(SPA)的核心之一是:更新视图而不重新请求页面vue-router在实现单页面前端路由时，提供了三种方式：Hash模式和History模式；根据mode参数以及运行环境决定采用哪一种方式初识路由vue路由基础引入vue框架和vue-router模块生成子组件或导入子组件使用VueRouter实例化VueRouter配置路由挂路由使用路由router-link和router-viewvue路由基础vue-router

基本使用使用路由对象属性在使用了vue-router的应用中，路由对象会被注入每个组件中，赋值为this.$route，并且当路由切换时，路由对象会被更新。vue路由基础使用路由对象属性vue路由基础$route.path

字符串，等于当前路由对象的路径，会被解析为绝对路径，如"/home/news"。$route.params

对象，包含路由中的动态片段和全匹配片段的键值对。$route.query

对象，包含路由中查询参数的键值对。例如，对于/home/news/detail/01?favorite=yes，会得到$route.query.favorite=='yes'。$route.matched

数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。$

当前路径的名字，如果没有使用具名路径，则名字为空。Vue路由传参vue路由传参什么是动态路由动态路由是指路由器能够自动的建立自己的路由表，并且能够根据实际情况的变化实时地进行调整。Vue路由传参的主要有query和params两种方式Query方式传参vue路由传参query传值字符串和对象写法$route.query接收query对象传值Params方式传参vue路由传参params传值字符串和对象写法$route.params接收params对象传值使用vuecreate

来创建一个新项目vue路由传参$router.push编程式路由Vue-router在vue-cli项目中的使用Vue-router的导入实例化及配置和导出路由高级使用Vue-router在vue-cli项目中的使用路由高级使用子组件Home.vue和About.vueVue-router在vue-cli项目中的使用路由高级使用Main.js中导入router对象并在Vue中挂载Vue-router在vue-cli项目中的使用路由高级使用Router-link实现路由跳转什么是嵌套路由路由高级使用嵌套路由就是路由里面嵌套他的子路由，子路由关键属性children每一个子路由里面可以嵌套多个组件，子组件又有路由导航和路由容器举例：假设page页面下包含home子组件和goods子组件配置嵌套路由（在page路由下增加一个children属性，配置home和goods两个子组件路由）什么是嵌套路由路由高级使用什么是命名路由给路由命名就是在routers配置路由的时候加一个name属性，特别是在嵌套路由path名称特别长的时候，通过name名称来标识一个路由更加方便一些。以下四种方式都可以导航到/page/home路径：template模板里什么是命名视图路由高级使用简单来说就是，给不同的router-view定义不同的名字，通过名字进行对应组件的渲染。如果router-view没有设置名字，那么默认名字为default。适用场景

有时候我们想在一个界面里同时(同级)展示多个视图，而不是嵌套展示，例如创建一个布局，有topNav(顶部导航)、sidebar(侧导航)和main(主要内容)三个视图，这个时候命名视图就派上用场了。配置路由：根路由下定义了三个组件index(主内容)：映射在router-view默认视图上。topNav(顶部导航)：映射在router-view的name为top的视图上。sideNav(侧边栏)：映射在router-view的name为side的视图上。常用的router的指令路由高级使用路由元信息meta定义对象的keepAlive使用常用的router的指令路由高级使用路由卫士全局路由卫士beforeEach先抛出一个问题,在SPA项目中如何修改网页标题?

网页标题是通过<title></title>来显示的,但是SPA只有一个固定的HTML,切换到不同页面时,标题并不会变化,但是可以通过JavaScript修改window.document.title='要修改的标题'

那么问题来了,在VUE工程里,在哪里,什么时候修改呢?比较理想的一个方法是,在路由页面发生改变时,统一配置.vue-router提供了导航钩子beforeEach和afterEach,它们会在路由即将改变和改变后触发,所以设置标题可以在beforeEach中完成.导航钩子有3个参数

·to即将进入的目标的路由对象

·from当前导航即将要离开的路由对象

·next调用该方法后才能进入下一个钩子常用的r