你真的了解Vue中的路由吗？

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

v-model双向绑定的本质

1. 使用model标签，做了两件事情：

   • 给v-bind子组件绑定一个value属性
   • 绑定自定义事件input，将值赋值给value竖向属性绑定的元素

2. 示范：

    <addBtn :value= "count" @input="val=>count=val"></addBtn>
   

语法糖：写代码时有更加简单的语法来实现，内部原理较为复杂，最终会替换为原理代码

路由

1. 路由含义：路径和组件的映射关系

2. 前端路由作用：实现业务场景切换 ，所有的业务都在一个HTML中实现

3. 优点：

   • 整体不刷新页面用户体验更好
   • 数据传递容易，开发效率高

4. 缺点：

   • 首次加载会比较慢一点。不利于SEO

5. 应用场景：网页在一个页面实现，点击不会跳转

Vue Router

1. 是Vue官方管理路由的模块包

2. 如果企业用的vue版本是Vue2的话，下载包最好是vue-router@3.5.3，因为4.0的包都是vue3开发用的

   yarn add vue-router@3.5.3

3. 使用步骤

   1.下包 yarn add vue-router@3.5.3 Vue 2 需要依赖低版本路由包 2.引入到main.js中 import VueRouter from 'vue-router' 3.安装路由插件

     Vue.use(VueRouter)
   

   注册两个全局组件 router-link router-view 4.创建路由规则数组 const routes = []注意const后面的变量名不能随便写 5.根据路由规则创建路由对象

    const router =  new VueRouter({
        routes
    })
   

   6.将路由对象挂到Vue实例上

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

   7.使用router-view设置路由的挂载点 将来切换的组件渲染到什么地方

示范：

组件分类

1. Vue组件分两类，一个是页面组件，一个是复用组件

2. 分类文件

   • src/views文件夹或者是pages（页面组件---页面展示---配合路由用）
   • src/components文件夹（复用组件---展示组件/常用于复用）