Vue学习第27天——路由vue-router的详解及案例练习
目录
一、路由概念
1、概念
在前端中,Vue路由是指根据路径URL匹配不同的组件,从而实现通过某些路径渲染与之关联的任何一个视图。
2、理解
一个路由(route)就是一组映射关系(key:value)。路由器(router)管理着多个路由
3、用途
构建单页面应用(SPA全称:Single Page Web Application)
4、单页面应用特点
① 整个应用只有一个完整的页面
② 局部刷新
③ 通过ajax请求获取数据
5、路由分类
① 前端路由
key是路径,value是组件(用于展示页面)
工作流程:当浏览器路径发生变化时,展示与之对应的组件
②后端路由
key是路径,value是function(用于处理客户端的请求)
工作流程:服务器接收一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据
二、搭建路由环境
1、下载并使用vue-router库
① 下载vuex库
npm i vue-router
注意点:vue2中必须使用vue-router3版本,vue3中必须使用vue-router4版,否则报错
② 引入
import VueRouter from "vue-router"
③ 使用VueRouter
Vue.use(VueRouter)
④ 使用VueRouter之后,在创建vm的时候就可以传入一个router配置项
new Vue({
//使用VueRouter之后,创建vm的时候可以传入一个router配置项
router,
render:h=>h(App),
}).$mount("#app")
2、配置router配置项
路由器router管理着所有的路由router
① 创建文件
文件路径:src/router/index.js
import Vue from "vue";
//引入VueRouter
import VueRouter from "vue-router";
//引入路由组件
import Cats from "../components/Cats";
import Dogs from "../components/Dogs";
//使用路由
Vue.use(VueRouter)
//创建一个路由器,管理每一组的路由
export default new VueRouter({
routes:[
{
path:'/dogs',
component:Dogs
},
{
path:'/cats',
component:Cats
}
]
})
② 在main.js中引入router配置项
//引入vue
import Vue from "vue";
import App from "./App";
//引入路由器
import router from "./router";
new Vue({
router,
render:h=>h(App),
}).$mount("#app")
以上步骤完成之后,router就配置成功,接下来vm和组件实例身上都会出现router配置项,我们也能在浏览器URL中看到#
3、实现组件切换
原始html中,我们通过a标签搭配href
实现路径切换:<a href="./cats.html">Cats</a>
在router中,可以通过router-link标签搭配to
实现路径切换:<router-link to="/Cats">Cats</router-link>
router-link标签在页面中最终会被转换为a标签
4、指定位置展示
<router-view></router-view>
三、案例练习
需求:点击导航区,实现展示区内容切换
页面样式通过bootstrap实现,引入bootstrap在线css样式:http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css
src/router/index.js文件代码
import Vue from "vue";
//引入VueRouter
import VueRouter from "vue-router";
//引入路由组件
import Cats from "../pages/Cats";
import Dogs from "../pages/Dogs";
//使用路由
Vue.use(VueRouter)
//创建一个路由器,管理每一组的路由
export default new VueRouter({
routes:[
{
path:'/dogs',
component:Dogs
},
{
path:'/cats',
component:Cats
}
]
})
App.vue代码
<template>
<div id="app">
<div>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Vue Router 案例练习</h2></div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- router-link实现路径切换 -->
<router-link class="list-group-item " active-class="active" to="/Cats">Cats</router-link>
<router-link class="list-group-item" active-class="active" to="/Dogs">Dogs</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- router-view指定展示位置 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
Cats路由组件代码
<template>
<p>我是喵喵学院</p>
</template>
<script>
export default {
name:"Cats",
}
</script>
Dogs路由组件代码
<template>
<p>我是狗狗学院</p>
</template>
<script>
export default {
name: 'Dogs',
}
</script>
运行结果
四、总结
1、路由组件通常放在src/pages
文件夹,一般组件放在components
文件夹
2、整个应用只有一个router
,可以通过$router
属性获取到
3、每个组件都有自己的$route属性
,里面存储着自身的路由信息
4、切换路由组件时,被隐藏的组件默认是被销毁的
,需要的时候重新挂载
代码验证以上注意项
Cats路由组件添加两个生命周期函数
mounted(){
console.log("Cats组件被挂载");
window.catRoute = this.$route;
window.catRouter = this.$router;
},
beforeDestroy(){
console.log('切换到Dogs组件时,我会被销毁');
},
Dogs路由组件添加两个生命周期函数
mounted(){
console.log("Dogs组件被挂载");
window.dogRoute = this.$route;
window.dogRouter = this.$router;
},
beforeDestroy(){
console.log('切换到Cats组件时,我会被销毁');
}
点击Cats再点击Dogs组件,控制台输出结果
五、多级路由
多级路由又叫嵌套路由
1、配置规则时,使用children配置项
routes:[
//一级路由
{
path:'/cats',
component:Cats,
//多级路由
children:[
{
//这里路径前面不要加/
path:'boniu',
component:Boniu,
}
]
}
]
2、跳转时要写完整路径
<router-link to="/cats/boniu">波妞信息</router-link>
3、多级路由案例
在以上案例的基础上,增加多级路由
在Cats路由组件内增加子路由(hangua和boniu),其他代码不变
router/index.js路由规则代码
import Vue from "vue";
//引入VueRouter
import VueRouter from "vue-router";
//引入路由组件
import Cats from "../pages/Cats";
import Dogs from "../pages/Dogs";
import Hangua from "../pages/Hangua";
import Boniu from "../pages/Boniu";
//使用路由
Vue.use(VueRouter)
//创建一个路由器,管理每一组的路由
export default new VueRouter({
routes:[
{
path:'/dogs',
component:Dogs
},
//一级路由
{
path:'/cats',
component:Cats,
//多级路由
children:[
{
path:'hangua',
component:Hangua,
},
{
path:'boniu',
component:Boniu,
}
]
}
]
})
Cats路由组件代码
<template>
<div>
<h3>喵喵学院学员信息</h3>
<div>
<ul class="nav nav-tabs">
<li><router-link class="list-group-item" active-class="active" to="/cats/hangua">憨瓜信息</router-link></li>
<li><router-link class="list-group-item" active-class="active" to="/cats/boniu">波妞信息</router-link></li>
</ul>
<!-- 组件展示区 -->
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name:"Cats",
}
</script>
Hangua路由组件代码
<template>
<ul>
<li>宠物名:憨瓜</li>
<li>年龄:3岁</li>
<li>性别:公猫(已绝育)</li>
</ul>
</template>
<script>
export default {
name:"Hangua"
}
</script>
Boniu路由组件代码
<template>
<ul>
<li>宠物名:波妞</li>
<li>年龄:3岁</li>
<li>性别:母猫(已绝育)</li>
</ul>
</template>
<script>
export default {
name:"Boniu"
}
运行结果
注意点
1、在配置子路由时,path配置项里面的路径不要加/
,否则组件不展示
2、在router-link标签中,to后面的路径要写完整路径
3、在开发中,路由嵌套达到4、5级就属于是极限嵌套,再往下嵌套没啥意义
相关文章
- (尚029)Vue_案例_交互footer组件功能
- (尚026)Vue_案例_动态初始化显示(尚025)
- (尚015)Vue过滤器(对显示的数据进行格式化)
- Methods, Computed, and Watchers in Vue.js
- Vue 父子组件之间的通信
- Vue - router-view 页面切换过渡动画(CSS)
- 初步整合vue-element-admin和GitDataV两个Vue开源框架方案实现大数据可视化
- Vue —— watch和watchEffect的区别
- (13)打鸡儿教你Vue.js
- [Vue warn]: Error in mounted hook: "Error: please transfer a valid prop path to form item!"
- vue中$refs、,$emit、$on
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目 (增补)
- vue中如何使用prismjs
- vue双向数据流
- Vue 国际化之 vue-i18n 的使用
- [vue]几十行代码写一个图书管理系统小demo来学习表单控件、列表渲染和事件绑定。
- 揭秘 Vue.js 九个性能优化技巧
- vue学习笔记八:Jquery VS Vue之全局属性对照
- vue学习笔记六:Jquery VS Vue之网络请求明细对照
- Vue富文本编辑器的使用vue-quill-deitor
- vue-cli脚手架之webpack.base.conf.js
- vue 中 直接操作 cookie 及 如何使用工具 js-cookie
- 浅析Vue.use作用、原理和源码解读及为什么建议使用对象plugin.install方式
- vue问题解决:Vue packages version mismatch 版本始终不对的解决
- vue中使用less出现的问题(style中使用less设置 scoped 遇到的坑)
- 取消Vue中格式警告
- Vue学习第33天——路由守卫(导航守卫)超详解讲解及使用场景、案例练习
- Vue学习第28天——路由传参(query参数和params参数)详解及案例
- Vue学习第19天——vue脚手架配置代理
- Vue使用第三方库实现动画效果:animate.css使用方法和教程案例
- Vue学习第14天——vue自定义事件及详细代码演示
- vue-elementUI:给循环而来的表格中按钮根据状态设置disabled
- Vue开发实例(05)之搭建项目主页面头部、导航、主体等页面布局