一、路由的简介
vue-rooter:是vue的一个插件库,专门用来实现SPA应用
1.对SPA应用的理解
1、单页 Web 应用(single page web application,SPA)。
2、整个应用只有一个完整的页面 index.html。
3、点击页面中的导航链接不会刷新页面,只会做页面的局部更新。
4、数据需要通过 ajax 请求获取。
2.什么是路由?
1、路由就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。
2、key 为路径, value 可能是 function 或 component组件
3、vue 的一个插件库(vue-router),专门用来实现 SPA 应用
3.路由的分类
(1)前端路由
1、key是路径,value是组件component,用于展示页面内容。
2、工作过程:当浏览器的路径改变时, 对应的组件就会显示
(2)后端路由
1、key是路径,value 是 function, 用于处理客户端提交的请求。(node.js)
2、工作过程:服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。
二、路由基本使用
1.安装vue-router
Vue2安装vue-router,命令:npm i vue-router@3
Vue3安装vue-router,命令:npm i vue-router
2.
src/router/index.js编写路由配置项
路径:src/router/index.js,该文件专门用于创建整个应用的路由器
这里要注意配置项里是routes:[]
噢
//引入vue-router
import VueRouter from 'vue-router';
//引入组件
import Home from '../components/Home.vue';
import About from '../components/About.vue';
//创建并导出一个路由器
export default new VueRouter({
routes: [
{
path: '/about',
component: About
},
{
path: '/home',
component: Home
}
]
});
3.main.js引入配置项并使用插件
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
// 引入bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
// 引入路由器
import router from './router/index'
// 引入并使用VueRouter
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
el:'#app',
render: h => h(App),
router:router
})
localhost:8080/#/说明路由使用成功
4.实现路由切换
在App.vue中 使用 <router-link></router-link>
标签实现路由的切换 ,to=“/xxx”
是展示的路径, active-class
是当你点击这个的时候可展示的效果(高亮样式)
<!-- 利用a标签实现页面的跳转 -->
<!-- <a class="list-group-item active" href="./about.html">About</a>
<a class="list-group-item" href="./home.html">Home</a> -->
<!-- 借助router-link实现路由切换 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
<!-- active-class实现点谁谁亮的高亮效果 -->
5.指定展示的位置
<router-view></router-view>
<!-- ????到底展示那个组件 -->
<!-- 决定组件展示的位置 -->
<router-view></router-view>
最后效果:
6.几个注意点
1、路由组件通常存放在src/pages文件夹,一般组件通常存放在src/components文件夹。一般组件就按我们之前用法那么用,路由组件的话就是靠<router-link></router-link>标签关联上index.js里配置的路由规则,然后由<router-view></router-view>放到指定位置。
2、通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。所以切换的时候,路由组件一直是 其他的销毁-当前的挂载 => 其他的销毁-当前的挂载 =>. … …
3、每个组件都有自己的$route属性,里面存储着自己的路由信息。
4、整个应用只有一个router,可以通过组件的$router属性获取到
三、嵌套路由(多级路由)
1.在pages中,创建News.vue
和Message.vue
2.配置路由规则,使用children配置项
router/index.js
// 引入vue-router
import VueRouter from 'vue-router';
// 引入组件
import Home from '../pages/Home.vue';
import About from '../pages/About.vue';
import News from '../pages/News.vue';
import Messages from '../pages/Messages.vue';
// 创建并导出一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'nmessages',
component:Messages
}
]
}
]
})
3.路由跳转
写在home.vue中,路径要写完整to="/home/news"
<ul class="nav nav-tabs">
<li>
<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
</li>
<li>
<router-link class="list-group-item" active-class="active" to="/home/messages">Message</router-link>
</li>
</ul>
<router-view></router-view>
四、路由的query参数
query参数是在组件的$route上的一个嘎达,可以用来接收数据,类似的还有params参数,在后面第六部分
1.传参的方式
(1)第一种方式::to中使用字符串拼接或者模板字符串,直接写在要转到的路由路径后面,使用?连接,&拼接
(2)第二种方式::to中使用对象的形式传参(推荐使用)
<!-- 跳转路由并携带query参数,to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->
<!-- to的对象写法 -->
<router-link :to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
},
}">
{{ m.title }}
</router-link>
2.接收参数的方式
可以看下$route
身上的东西,有query携带的id title,使用$route.query
来接收
pages/detail.vue
<template>
<ul>
<li>消息编号:{{ $route.query.id }}</li>
<li>消息标题:{{ $route.query.title }}</li>
</ul>
</template>
<script>
export default {
name:'Detail',
mounted(){
console.log(this.$route);
}
}
</script>
3.案例
(1)配置三级路由
首先建立路由组件pages/Detail.vue
,然后去配置三级路由,在引入
// 引入vue-router
import VueRouter from 'vue-router';
// 引入组件
import Home from '../pages/Home.vue';
import About from '../pages/About.vue';
import News from '../pages/News.vue';
import Message from '../pages/Message.vue';
import Detail from '../pages/Detail.vue';
// 创建并导出一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
path:'detail',
component:Detail
}
]
}
]
}
]
})
(2)设置路由跳转并传参
在Message
组件中先把路由跳转标签做好,使用v-for
生成路由标签<router-link>
,然后点击能够显示对应路径下的组件,并配置好<router-view></router-view>
目标。
<!-- 跳转路由并携带query参数,to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->
<!-- to的对象写法 -->
<router-link :to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
},
}">
{{ m.title }}
</router-link>
(3)目标组件接收参数
传的时候都会传到目标组件的$route.query
身上,Detail.vue
<ul>
<li>消息编号:{{ $route.query.id }}</li>
<li>消息标题:{{ $route.query.title }}</li>
</ul>
五、命名路由
作用:可以简化路由的跳转。
使用:先命名,使用name属性,然后简化后可以直接通过名字跳转,比较方便。
注意:传参时字符串写法没法这么用
<!-- to的对象写法 -->
<router-link :to="{
// path:'/home/message/detail',
name:'xiangqing',
query:{
id:m.id,
title:m.title
},
}">
{{ m.title }}
</router-link>
六、路由的params参数
其实呢套娃时传数据不只可以用query参数,也可以用params
参数,params也是$route
上的玩意儿
1.配置路由,声明接收params参数
2.传递参数
两种写法:注意:路由携带params参数时
,若使用to的对象写法
,则不能使用path配置项,必须使用name配置!
<!-- 跳转路由并携带params参数,to的字符串写法 -->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link>
<!-- to的对象写法 -->
<!-- <router-link :to="{
// path:'/home/message/detail',params不能用path
name:'xiangqing',
params:{
id:m.id,
title:m.title
},
}">
{{ m.title }}
</router-link> -->
3.接收参数
七、路由的props配置
作用:让路由组件更方便的收到参数
1.写法1:死数据
值为对象,该对象中的所有key-value都会以props的形式传给Detail组件
缺点:这样值是死的
2.写法2:props:true
值为布尔值,若布尔值为真,就会把该路由组件收到的params参数,以props的形式传给Detail组件
缺点:只能传params参数的,query参数不能用这个
3.写法3:函数
props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件,这个是最常用的,函数会受到参数,这个参数就是组件身上的$route
,我们可以通过它来获取query或者params里面的东西,然后传过去