路由:#
vue是如何做到使后端乖乖交出view层的控制权的?,难道是直接使用window.location.href = url吗?
其实学过路由才知道, 使用的是vue-router,一个官方提供的路由框架,可以使用我通过组合组件来组成应用程序,仰仗它的路由插件vue-router,我们轻松控制页面的切换
我们要做的就是将组件components映射到routers,然后告诉vue-router到哪里去渲染他们
定义路由器#
安装插件
npm install vue-router --save
编码,其实大家都会把关于路由的编码单独放到一个叫router的文件夹中,而且,它的编码基本上是机械化的编码,分为如下几步
- 引入Vue,VueRouter
- 声明Vue.use(VueRouter)
- 引入路由组件
- 对外暴露路由器对象,并且把路由组件配置进路由器对象
注意点 下面的配置部分, routes 不写乱写!!!
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import Home from './Home.vue' import About from './About.vue' import Me from './Me.vue' export default new VueRouter({ // 添加路由 routes:[ { path:'/home', component:Home, meta:{ // 添加自定义的字段,可以当成flag,也可以文本 } }, { path:'/about', component:About, meta:{ // 添加自定义的字段,可以当成flag,也可以文本 }, childred:[ // 嵌套路由 { path:'/about', component:About, meta:{ // 添加自定义的字段,可以当成flag,也可以文本 } } ] } }, { path:'', // 默认访问空的话,重定向到/home redirect:'/home' } ] })
使用路由进行页面的跳转#
原来进行页面的跳转我们通常使用a标签,(一般把a标签设计成按钮,或者导航栏的样子,点击发送请求,进而跳转页面了), 而vue的路由其实和a标签差不多,我们使用vue的 router-link标签替换a标签
<router-link to:'/about' class="可以让我看起来像按钮的css样式"> </router-link> <router-link to:'/home' class="可以让我看起来像按钮的css样式"> </router-link> <router-view ></router-view>
这样用户点击 router-link,就会把相应的子组件移植到标签块中
补充:
| 属性 | 类型 | 含义 |
| to | string | Location | 表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。 |
| replace | boolean | 设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。 |
| append | boolean | 设置 append 属性后，则在当前（相对）路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b |
回退到上一个路由#
我们可以在按钮上添加下面的动作,是路由回退一级
<button @click="$router.back()"></button>
缓存路由组件#
使用如下标签包裹我们的router-view,这样当我们再回退到上一个路由时,用户加进去的状态依然存在
<keep-alive> <router-view ></router-view> </keep-alive>
$router与$route#
$router是路由器对象,说白了就是用它去跳转页面,美其名曰:编程式路由导航
$route是路由对象,说白了就是某一个路由对象,既然是某一个,就不能进行页面的跳转,相反是可以获取出当前路由组件的属性,它的结构图如下:
$route的组成图
向路由组件传递值 一#
需求: 我们想发送这样的请求 http:localhost:8080/home/1/羊肉串,在路径上携带着参数1
路由怎么接收参数呢?--> 使用:占位
export default new VueRouter({ // 添加路由 routes:[ { path:'/home/:id/:type', // 如果想在路径上传递值进来,就使用:占位 component:Home, meta:{ // 添加自定义的字段,可以当成flag,也可以文本 flag:true } },
当我们添加了/:之后,它的组成结构就变成了这个样子
像下面这样传递值进去,发起请求
<router-link to:`/home/${id}/${type}` class="可以让我看起来像按钮的css样式"> </router-link>
同时,我们也可以向下面这样使用$route. 在对应不同的路由组件中,把里面的属性取出来, 注意啊,这样取值,前提是我们前面使用 /:id占位,并且也整整传递值进去了
<h1>id= {{$route.params.id}}</h1>
向路由组件传递值 二#
使用<router-view >标签传递值
<router-view msg='abc'></router-view>
在路由组件中通过props取出值,然后可以直接使用
export default{ props:[ msg:String ] }
编程式的路由导航#
编程式的路由导航说白了就是,不用router-link标签转而使用代码路由的跳转呗, 举个例子,我们使用手机qq,最下面有几个导航栏,点击不同的按钮转换到不同的页面去,如果用编程式的路由导航就很好做
- 第一步就是将需要的路由组件配置进路由器
- 给按钮绑定上点击事件
- 点击事件触发我们所谓的编程式路由导航
vue提供了两种编程式的路由导航实现
- 第一种:
这种常用的一种
this.$router.replace(`/home/${id}`)
- 第二种:
这种具有栈的特性,也就是说,用户点击返回键,会返回到上一级路由
this.$router.push(`/home/${id}`)
slot标签#
它是个和 rout-view 和像的标签,都是用来占位的,它可以接受父组件传递给他的一段html
举个例子: 有四张路由组件,他们共用一个叫header的组件当作自己的头部, 但是他们需要传递进去属于自己的不同的值, 下面使用slot实现
在 MyHeader.vue中
<!--首页头部--> <header class="header"> <!-- 这里使用插槽占位--> <slot name="left"></slot> <span"> <span >我是header</span> </span> <!-- 这里使用插槽占位--> <slot name="right"></slot> </header>
在父组件中使用:注意啊，下面的组件想往MyHeader.vue中的插槽中，传递进去代码片段，前提是他要把MyHeader.vue映射成标签，成为他的父组件
<div> <MyHeader> <span class="header_search" slot="left"> <i class="iconfont icon-sousuo"></i> /*在插槽的左边植入一个icon*/ </span> <!-- 给右边的插槽传递模板 --> <span class="header_login" slot="right"> <a href="" >登录|注册</a> /* 在插槽的右边植入一个链接 */ </span> </MyHeader> </div>
