当前位置：首页 > news >正文

【Vue五分钟】 Vue Router的使用场景

news 来源：原创 2024/5/3 7:54:52

📑博客主页：@丘比特惩罚陆

💖欢迎关注：点赞收藏⭐留言✒
💬系列专栏：web前端、嵌入式、笔记专栏
🎮 加入社区：丘比特惩罚陆
🥇人生格言：选对方向，每走一步都是进步！
✒️欢迎大佬指正，一起学习！一起加油！

👏 希望大家能小手一动，帮忙点个赞！

😁资源邮箱：2237814512@qq.com

1.Vue Router的使用场景

2.选择什么样的模式的路由和底层原理

3.Nuxt 用来解决什么问题

4.Nuxt核心原理

5.UI组件库的对比

6.提升开发效率和体验的常用工具

7.单元测试的重要性和使用

1.Vue Router的使用场景

传统的开发模式：

www.xxx.com——index.html;

www.xxx.com/about——about.html;

www.xxx.com/xxx——xxx.html.

以前传统的开发就是每个 html 或其他文件对应一个 url ，但是每次切换 url 都需要重新加载页面，影响用户体验。

单页面（SPA）开发模式：

www.xxx.com——index.html;

www.xxx.com/about——index.html;

www.xxx.com/xxx——index.html

这种则是不管什么 url 都对应同一个文件（不是很严谨，依然可以定位到不同的文件，只不过没必要）。用户切换 url 不再是重新加载页面，而是通过一些逻辑找到对应接口返回不

同的数据 / 组件。

解决的问题：

监听URL的变化，并在变化前后执行相应的逻辑；

不同的URL对应不同的不同的组件；

提供多种方式概念URL的API（URL的改变不能导致浏览器刷新）

使用方法：

提供一个路由配置表，不同的URL对应不同组件的配置；

初始化路由实例new VueRouter（）；

挂载到Vue实例上面；

提供一个路由占位，用来挂载URL匹配的组件

main.js

import Vue from 'vue'
import VueRouter from 'vue-router"
import App from './App.vue'
import routes from './routes'

Vue.config.productionTip = false

vue.use(VueRouter)
const router =new VueRouter(
{
//mode: 'history',
routes,
})

new Vue({
router,
render: h > h(App),
}).$mount('#app')

安装引入使用 Vue router ，将路由表写到一个文件里实例化router 的时候把表丢进去就行。

<template>
<div id="app">
<h2>router demo</h2>
<router-view></router-view>
</div>
</template>

<script>
export default{name: 'app',components:{),
}
</script>
<style>#app{
font-family: 'Avenir', Helvetica,Arial, sans-serif;一webkit-font-smoothing: antialiased;
一moz-osx-font-smoothing: grayscale;text-align: center;
color:O#2c3e50;margin-top:60px;}
</style>

router.js

import RouterDemo from './components/RouterDemo'
import RouterChildrenDemo from './components/RouterChildrenDemo'

const routes =[
  { path: '/foo' , component: RouterDemo,name: '1'},
  { path: '/bar' , component: RouterDemo,name: '2'},
//当/user/:id匹配成功,
// RouterDemO会被渲染在App的<router-view/>中
{ path: '/user/:id',
  component: RouterDemo,
  name: '3',
  props: true,
children: [
    {
        //当/user/:id/profile匹配成功,
        // RouterchildrenDemo会被渲染在 RouterDemo的<router-view/>中
        path: 'profile',
          component: RouterchildrenDemo,
        name: '3-1'
    },
    {
        //当/user/: id/posts 匹配成功
        // RouterChildrenDemo 会被瀘染在RouterDemo 的<router-view/> 中
        path:'posts',
        component: RouterChildrenDemo
    }
]
}
        ,
        { path: '/a', redirect:'/bar' },
        { path: '*', component: RouterDemo, name: '404' }
]



export default routes

我们可以看到路由表引入了两个组件，匹配到对应的路由则使用对应组件，渲染到前面的 router-view 中。 props 的意思是运行动态路由作为一个参数传递给组件，组件通过props:[xxx]接受。路径为 * 是当前面都匹配不到才走的，一般是到 404 页面.

路由跳转可以有 router-link 也可以用 API 的方式（$route.xxx）

2.选择什么样的模式的路由和底层原理

路由类型：

Hash模式：丑，没办法使用锚点定位；

History模式：需要后端配合，IE9不兼容（可以使用强制刷新处理）

Url 里面有 # 就是哈希模式。无法使用锚点定位是因为哈希是在路由。

import Vue from 'vue '
import VueRouter from 'vue- router'
import App from ' ./App. vue '
import routes from ' ./ routes'

Vue.config. productionTip = false
Vue.use (VueRouter)
const router = new
VueRouter({
node: 'history',
routes,
})
new Vue({
router,
render: h => h(App),
}). $mount( '#app' )

解决哈希存在的问题就是改用 history ，只需要在配置表那加上 mode 为 history 就行。关于 IE9 的不兼容是可以解决，只不过就无法使用这种单页的形式了。就是当 url 修改的话不再是通过 ajax 拿到数据去渲染而是选择强制刷新当前 url 。

其实路由是通过蓝色那边的 API 把 router 的信息变成一个响应式的，触发 router-view 的更新

3.Nuxt 用来解决什么问题

并不是官方维护的，用的也比较少，实战也不会用，但是可以了解。

SPA 缺点：

不利于SEO；服务端渲染SSR；首次屏渲染时间长；预渲染Prerenderirng

SEO 就是搜索引擎优化（因为内容都是通过接口获取的，搜索引擎爬取我们的网页即 index.html 是没有什么内容的，就很难出现在搜索结果排名中）。因为我们需要加载数据请求接口所以白屏时间会长一些。解决的方法就是 SSR 和 Prerendering.

静态站点比如联系我们、关于我们等一些不常变动的页面.SSR 的话生命周期钩子一些是不能用的，路由配置、webpack 配置也都有所不同，所以是比较繁琐。

Nuxt:

静态站点；动态渲染；简化配置

Nuxt 就是帮我们解决这些问题。

4.Nuxt核心原理

Nuxt的核心原理是什么，或者是SSR的核心原理/流程是什么？

打包业务代码的时候，提供两个入口文件，一个给服务端使用（返回新创建的 Vue 实例）一个给客户端/浏览器使用（将 Vue 实例挂载到指定的 DOM 上）。经过 webpack 打包后会生成两个 bundle 文件，服务器的bundle 渲染了 html 什么的到我们页面上，但是具体的点击什么的还要靠客户端的 bundle 混合将 html 完全由 Vue 管理托管为 DOM，响应后续的变化。（所以不管服务端搞什么，客户端都是要渲染的）。

上面是不用 SSR 只返回一个空壳的 html，下面是使用 SSR，根据 url 返回对应字符串什么的给客户端。

5.UI组件库的对比

Element UI、Ant Design Vue、View组件库的对比；

建议是使用单测比较高覆盖率的，这些都是组件库，里面包含一个个组件，然后合起来做一个模板的就是 admin 了。

6.提升开发效率和体验的常用工具

一般有：ESLint、Prettier、Veter、vue-devtools;

Vuter:

语法高亮；
标签补全、模版生成；
Lint检查；
格式化

这个其实是 vscode 的插件。

ESLint:

代码规范；
错误检查

安装 eslint 相关的包然后做一下配置（建议开那个被注释了的强烈建议）即可。

Prettier:

格式化

可以看到我们配置 eslint 的时候也顺便配了个 prettier 就是防止两者冲突。直接按下保存即可更改。

module.export = {
  singleQuote:ture,
//trailingComma:'all'
};

Vue DevTools:

集成Vuex
可远程调试
性能分析

7.单元测试的重要性和使用

开源一般都是要覆盖到所有的代码，底层组件库什么的单测也是很重要，而业务的话可以选择性的单测部分代码。短期来看，单测会影响开发速度，但是后续迭代需求什么的还可以及时更改问题。

重要性：

保证研发质量
提高项目的稳定性
提高开发速度

使用方法：

jest或mocha
@vue/test-utils
sinon

jest 和 mocha 是两个测试运行环境 / 测试运行器，jest 比较全，配置也比较少。 mocha 是 vue 提供的，比较实用。 sinon 是辅助测试库，不是必要的。vue create 创建一个 test1-demo，选择自定义，勾上 unit Testing 单测，选上 prettier，选择 jest，可以放到独立的文件不要让 package.json 太大.

创建完成我们发现多了一个 tests 文件夹和 jest 的配置，配置的话第一个是指定测试的文件类型，第二个是类似 loade （ r 通过各种包处理我们的一些文件），第三个是要忽略测试的文件，第四个是类似那个指定快捷键符号的（@ 符号），第五个是快照的格式化，第六个是对哪些文件走单测，第七个是给js DOM 使用的，本质上它还是跑在浏览器的环境中。

我们看看给的单测例子，是对 hello 组件的测试， describe 就是定义一个测试集，第一个参数是名称，每一个 it 是单测的最小集，里面第一个参数是名称，第二个就是函数了，里面写我们的校验。里面是用 shallowMount 浅渲染（就是只是渲染这一层，里面还有东西就不管了），正常渲染就是 mount（第一个是组件，第二个是参数）。这个太简单了，我们写一个计数器 Counter.vue 来丰富一下测试，能够加就行了。

建一个属于 counter 的测试，无需接收参数只需要组件渲染后的 html （） .toMatchSnapshot （）。生成快照就是自动在文件夹下新建一个快照储存的地方（就无需一个个去 test 了，如果修改了代码我们再次生成快照就会失败，因为已经与之前的 html 不一样了，所以就很方便对比代码），里面就是具体渲染的内容.

当然单测是可以监听的， run 的时候加上 -- -- watchAll 就会每次修改都自动 watch 。当然这个还不行，肯定不能只是测试一下我的快照，核心功能是要测试点击后数据的变化，再写一个 it ，要执行点击的话需要找到按钮（通过渲染后组件的 find API ），按钮通过点击触发，然后拿到这个值希望是 xxx 。还希望再复杂一点，在组件那再加一个点击事件，修改 count 值同时$emit 抛出一个事件和参数，回到测试，我们想要监听这个事件是否被抛出了，可以在组件渲染的时候加一个listeners 对象，里面监听抛出的事件，在外面起一个标志位，抛出的事件中改变这个标志位，判断的话是希望我们的标志位被改变了，从而判断是否走了这个事件。但是如果是想要判断点击的次数，可以在外面定义一个变量来存储，不过这样子不是很友好，我们可以利用刚才提到的辅助库 sinon ，在测试中引入，利用 spy （）生成一个替身指向我们抛出的事件，其它关于事件的就可删掉了，最后是期望事件的 called 为 true 。希望事件的 callCount 次数为 xxx 。