Vuejs2 Vue.js路由无法执行此操作_Vuejs2_Vue Router

Vuejs2 Vue.js路由无法执行此操作

vuejs2

Vuejs2 Vue.js路由无法执行此操作,vuejs2,vue-router,Vuejs2,Vue Router,我的vue.js应用程序路由不工作，请帮助，没有太多代码，只需将此代码复制粘贴到index.html中，您就会看到奇怪的错误。使用vue路由器时，我们无法使用脚本： <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati

我的vue.js应用程序路由不工作，请帮助，没有太多代码，只需将此代码复制粘贴到index.html中，您就会看到奇怪的错误。使用vue路由器时，我们无法使用脚本：

   <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Starter Vue.js Bt4</title>

    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <!-- Our Custom CSS -->
    <link rel="stylesheet" href="style.css">

    <!-- Font Awesome JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>

    <!-- Load polyfills to support older browsers -->
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>

    <!-- Required scripts -->
    <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>
        <body>
            <div class="wrapper" id="app">
            <router-link to="/users">Users</router-link>
            <router-link to="/home">Go to HOME</router-link>
            <router-view></router-view>


            <script type="text/x-template" id="users">
                <p>
                    <ul id="demo">
                      <li v-repeat="items" >
                        {parentMsg}} {{childMsg}}
                          </li>
                    </ul>
                </p>
            </script>

            <script type="text/x-template" id="home">
                <button v-on:click="count++">Vous mavez cliqué {{ count }} fois.</button>
            </script>



            </div>
        </body>


        <script>


        var Home = { 

            data: function () {
                return {count: 0}
          },template: "#home"

        }

        const Users= { 

         template: "#users",
          data: {
            items: [
              { childMsg: 'Foo' },
              { childMsg: 'Bar' }
            ]
          }


        }

        const routes = [
          { path: '/home', component:Home},
          { path: '/users', component: Users}
        ]


        const router = new VueRouter({
          routes // short for `routes: routes`
        })


        const app = new Vue({
          router
        }).$mount('#app')

        </script>


Starter Vue.js Bt4
使用者
回家



{parentMsg}{{childMsg}}



你是马韦兹·克利奎斯吗。
var Home={
数据：函数（）{
返回{count:0}
}，模板：“#主页”
}
常量用户={
模板：“#用户”，
数据：{
项目：[
{childMsg:'Foo'}，
{childMsg:'Bar'}
]
}
}
常数路由=[
{路径：'/home'，组件：home}，
{路径：'/users'，组件：users}
]
常量路由器=新的VueRouter({
routes//“routes:routes”的缩写`
})
const app=新的Vue({
路由器
}).$mount（“#应用程序”）

这是一个错误，它不起作用，请帮助：错误无效，无法显示用户：

[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions. vue.js:634:17
[Vue warn]: Property or method "count" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>) vue.js:634:17
[Vue warn]: Property or method "childMsg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>) vue.js:634:17
[Vue warn]: Property or method "items" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Anonymous>
       <Root> vue.js:634:17
[Vue warn]: Failed to resolve directive: repeat

(found in <Anonymous>)

[Vue warn]：“数据”选项应该是在组件定义中返回每个实例值的函数。vue.js:634:17
[Vue warn]：属性或方法“count”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-反应性质。
（位于）vue.js:634:17
[Vue warn]：属性或方法“childMsg”未在实例上定义，但在呈现期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-反应性质。
（位于）vue.js:634:17
[Vue warn]：属性或方法“items”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-反应性质。
发现于
--->
我将尝试在JS代码中编写模板
编辑：已解决：
您必须更新一些内容
const Users= { 

         template: "#users",
          data() {
           return {
            items: [
              { childMsg: 'Foo' },
              { childMsg: 'Bar' }
            ]
          };
         }
        }

您尚未添加主节点组件，但仍在使用，只需从管线中删除主节点即可
const routes = [
          { path: '/users', component: Users}
        ]

谢谢，但它仍然不起作用：[Vue warn]：属性或方法“childMsg”未在实例上定义，但在renderit期间被引用。脚本似乎不适用于Vue.js路由，或者内容有问题。您需要在字符串中定义组件，或者尝试在1.0中不推荐的任何方法v-repeat:在此处解决：
const Users= { 

     template: `
      <p>
            <ul id="demo">
              <li v-for="item in items" >
                {{item.childMsg}} 
            </li>
            </ul>
        </p>
    `,
      data() {
        return {items: [
          { childMsg: 'Foo' },
          { childMsg: 'Bar' }
        ]}
      }
    }

const Users= { 

         template: "#users",
          data() {
           return {
            items: [
              { childMsg: 'Foo' },
              { childMsg: 'Bar' }
            ]
          };
         }
        }

const routes = [
          { path: '/users', component: Users}
        ]