尚品汇商城项目 涉及Vue-router相关内容的理解

1.vue-router 和SPA

SPA(single page application)单页面应用，不刷新页面，基于 vue-router进行路由跳转。不是原生浏览器的文档跳转。

SPA与MPA的区别：

1. SPA每次进行页面跳转，不会导致整个页面刷新，用户体验较好。MPA每次路由跳转都需要刷新页面。
2. SPA不同页面相同的部分 （样式表，脚本），不需要重复加载，MPA需要
3. SPA大部分逻辑都集中在客户端，便于前后端协调工作，提高效率。MPA的开发和维护更加复杂
4. MPA的页面是独立的，更利用进行SEO搜索引擎优化。
5. 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参数的数据