【Vue】关于 The template root requires exactly one element 报错的解决方案

###10.缓存路由组件 1.作用：让不展示的路由组件保持挂载，不被销毁。 2.具体编码：   ```vue  <keep-aliveinclude="News">     <router-view></router-view>  </keep-alive>  ``` ###11.两个新的生命周期钩子 1.作用：路由组件所独有的两......

1.作用：不借助```<router-link>```实现路由跳转，让路由跳转更加灵活 2.具体编码：   ```js  //$router的两个API  this.$router.push({  name:'xiangqing',  params:{  id:xxx,  title:xxx  }  })    this.$router.re......

以下是一些Pinia的其他高阶功能：storeToRefs()：响应式解构仓库，保证解构出来的数据是响应式的数据。状态持久化：Pinia并没有内置的状态持久化功能，但你可以使用第三方库或自定义插件来实现状态的持久化。例如，你可以使用 localStorage 或 sessionStorage 来将状态保存在客户端......

导航到不同的位置注意：在Vue实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。想要导航到不同的URL，可以使用 router.push 方法。这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的URL。该方法的参数可以......

1.作用：控制路由跳转时操作浏览器历史记录的模式2.浏览器的历史记录有两种写入方式：分别为```push```和```replace```，```push```是追加历史记录，```replace```是替换当前记录。路由跳转时候默认为```push```3.如何开启```replace```模式：```<router-linkreplace.......>News</r......

###7.路由的props配置 ​作用：让路由组件更方便的收到参数 ```js{name:'xiangqing',path:'detail/:id',component:Detail, //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件//props:{a:900} //第二种写法：props值......

新建vue项目  main.jsimportVuefrom'vue'importAppfrom'./App.vue'importstorefrom"@/store";importrouterfrom"@/router";import'@/utils/vant-ui';Vue.config.productionTip=false;newVue({rende......

新建vue项目 main.jsimportVuefrom'vue'importAppfrom'./App.vue'importstorefrom"@/store";importrouterfrom"@/router";import'@/utils/vant-ui';Vue.config.productionTip=false;newVue({render......

新建vue项目 此项目需要用到json-server，模拟后台服务器接口功能，npmijson-server-g安装此包，然后再vue项目的全局根目录中新建db文件夹，其中新建index.json文件。{"cart":[{"id":1001,"name":"低帮城市休闲户外鞋天然牛皮COOLMAX纤维","price":1......

新建vue项目 main.jsimportVuefrom'vue'importAppfrom'./App.vue'importstorefrom'@/store'Vue.config.productionTip=false;newVue({render:h=>h(App),store}).$mount('#app');app.vue<template>......