1.vue-router 和SPA
SPA(single page application)单页面应用,不刷新页面,基于 vue-router进行路由跳转。不是原生浏览器的文档跳转。
SPA与MPA的区别:
- SPA每次进行页面跳转,不会导致整个页面刷新,用户体验较好。MPA每次路由跳转都需要刷新页面。
- SPA不同页面相同的部分 (样式表,脚本),不需要重复加载,MPA需要
- SPA大部分逻辑都集中在客户端,便于前后端协调工作,提高效率。MPA的开发和维护更加复杂
- MPA的页面是独立的,更利用进行SEO搜索引擎优化。
- MPA初始化加载,由于只需要加载当前页面,速度比SPA更快。
......
2 .vue-router的使用
在项目文件夹打开终端 输入---npm i vue-router@3
npm i vue-router@3 安装vue2.0 / vue3 使用vue-router@4
2.1 项目中配置路由
项目当中配置的路由一般放置在router文件夹中
router 文件夹 的 index文件写完后,相当于 node中的一个模块,虽然在 index.js 配置完成且对外暴露。还需要在入口文件 main.js 进行注册
// 配置路由的地方
import Vue from "vue";
import VueRouter from "vue-router";
// 使用插件
Vue.use(VueRouter)
// 引入路由组件
import Home from '../pages/Home'
import Search from "../pages/Search";
import Login from '../pages/Login'
import Register from '../pages/Register'
// 配置路由
export default new VueRouter({
// 配置路由routes
routes: [
{
path: '/home',
component: Home
},
{
path: '/search',
component: Search
},
{
path: '/login',
component: Login
},
{
path: 'register',
component: Register
}
]
})
import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from './router'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
// 注册路由: KV 一致 省略V【router小写的】
router
}).$mount('#app')
2.2 路由组件和非路由组件的区别
1.路由组件一般放置在 pages | views 文件夹,非路由组件一般放置 components 文件夹中;
---components文件夹:放置非路由组件(共用全局组件)
---pages | views 文件夹: 经常放置路由组件
2.路由组件一般需要在 router 文件夹中进行注册(使用的即为组件的名字),非路由组件在使用的时候一般是 以标签的形式使用;
3.注册完路由,不管路由组件还是 非路由组件,身上都有$route/ $router属性
2.3 $route 和 $router
$route:一般获取路由信息【路径、query、params等等】
$router:一般进行编程式导航进行路由跳转【push | replace】(push 跳转的时候有历史记录| replace 跳转没有历史记录 )
2.4 路由的跳转
两种路由跳转的方式 :编程式导航、声明式导航
- 声明式导航 router-link,可以进行路由跳转【router-link(务必要有to属性),可以实现路由的跳转,在html结构中显示为 《a》标签】
<!-- 声明式导航:必须要有to属性 -->
<router-link to="/login">登录</router-link>
- 编程式导航 push | replace, 可以进行路由跳转【利用的是组件实例的 $router.push | replace 方法,可以实现路由的跳转。】
编程式导航与声明式导航的区别:
声明式导航能做的,编程式导航都可以完成;
但 编程式导航可以进行路由跳转,还另外可以完成其他业务逻辑。
2.5路由传参
- params参数: 属于路径当中的一部分。 在配置路由的时候需要占位;
(特别注意: 路由携带params参数时,若使用to的对象写法,则不能使用path配置项, 必须使用name配置)
- query参数:不属于路径当中的一部分,不需要提前在路由配置中占位。
“?k=”+this. 我在加号前面加了空格报错
举例:
1. header 文件夹中 index.vue 的两种不常用传参写法如下图:
2. 注意: 若路由携带params参数时,若使用传参的对象写法,则不能使用path配置项, 必须使用name配置,并且在path 中进行占位 【:k 加上冒号表示 params参数 k 可以没有;】
3.使用——在search index.vue中
<template>
<div>
我是搜索
<h1>query参数 ===》 **{{$route.query.keyWord}}**</h1>
<h1>params参数 ===》 **{{$route.params.k}}**</h1>
</div>
</template>
4.网页显示
注册完路由,不管路由组件还是 非路由组件,身上都有$route/ $router属性
可以拿到 params 和 query参数的数据