Vue2.6+Vue Router3向路由组件传参失败报属性未定义如何解决

• 脚本引入顺序错误：Vue Router依赖Vue，必须先引入Vue再引入Vue Router，你当前的引入顺序是先引vue-router再引vue，会导致基础报错。
• 路由组件未接收props传递：路由渲染的组件挂载在<router-view>节点下，你需要在<router-view>上显式绑定要传递给子路由组件的属性，当前空的<router-view>没有传递任何属性，所以showForm prop始终为undefined。
• 组件模板作用域使用错误：每个Vue组件的模板都是独立作用域，只能访问组件自身声明的props、data等属性，不能直接访问根实例的isConfigured属性。你在组件模板中直接引用isConfigured，而组件本身没有声明这个属性，所以触发不存在的警告。
• 代码细节错误：包括路由链接to="/Settings "末尾有多余空格，和路由配置的/settings路径不匹配；x-template的id大小写和组件引用的id不一致；x-template的<script>标签未闭合。

1. 修正脚本引入顺序

<!-- 先引入Vue，再引入Vue Router -->
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script src="app.js"></script>

2. 给router-view绑定传递的props

<!-- 把根实例的isConfigured作为showForm传给路由组件 -->
<router-view :show-form="isConfigured"></router-view>

3. 修正组件模板，删除无效的作用域引用，补全标签闭合

<script type="text/x-template" id="Settings">
  <section>
     {{ showForm }}
  </section>
</script>
<script type="text/x-template" id="test">
  <section>
     {{ showForm }}
  </section>
</script>

4. 修正路由链接的路径错误

<li><router-link to="/settings">Settings</router-link></li>

内容的提问来源于stack exchange，提问作者Peter Orji