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

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文件夹（复用组件—展示组件/常用于复用）

声明式导航（router-link）

1. 传参方式：
   • to = “/path?参数名=值”
   • to = “/path/值”（需在路由规则里配置/path/:参数名）
2. 如何接收路由传值？
   • $route.query.参数名
   • $route.params.参数名
3. 优点：
   • 1.自定义判断是否要加#
   • 2.自动添加类名，方便实现导航高亮
4. 用法：<router-link to = "路径" ><router-link>

数名
3. 优点：

• 1.自定义判断是否要加#
• 2.自动添加类名，方便实现导航高亮

4. 用法：<router-link to = "路径" ><router-link>