Vue路由器。 Root Vue 没有数据？答案

【问题标题】：Vue router. Root Vue has no data?Vue路由器。 Root Vue 没有数据？
【发布时间】：2018-06-24 03:23:54
【问题描述】：

我正在尝试使用 vue-router。我已经习惯了像这样实例化 Vue...

vm = new Vue({
   el : '#vueRoot',
   data : { msg : 'hello' }
   ...
})

现在I'm being asked to通过路由器实例化它...

vm = new Vue({
   router  
}).$mount('#vueRoot');

我的问题是我的data 或methods 或我通常会使用的任何其他Vue 属性放在哪里？ 我看到我的根Vue 可以有标记，router-link元素。我是否明白，一旦我使用了路由器，一切都应该在组件中？

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

您可以使用默认符号：

new Vue({
  el: '#app',
  router,
  template: '<MyApp/>',
  components: { MyApp }
})

但您的模板中必须有一个<router-view/> 元素。

【讨论】：

【解决方案2】：

在你的 Main.js 中

    window.Vue = require('vue');
    import VueRouter from 'vue-router'
    import Overview from '../components/Overview.vue';
    import Sale from '../components/Sale.vue';


    Vue.use(VueRouter);

    let routes = [
        {path: '/home', component: Overview,name:'Overview'},
        {path: '/sale', component: Sale, name:'Sale'},
    ];


    const router = new VueRouter({
        mode: 'history',
        routes 
    });


    const app = new Vue({
        el: '#vueRoot',
        router,
    });

在您的根视图位置元素中

 <router-view></router-view>

在您的链接中

                 <router-link to="/sale" class="nav-link">
                    <i class="nav-icon fas fa-cart-plus "></i>
                    <p>
                        Point of Sale

                    </p>
                </router-link>

在您的意见中

          <template>
              <v-app>
                {{viewTitle}}
                {{viewSubtitle}}
              </v-app>
            </template>
            <script>
                export default {
                      data() {
                    return {
                       viewTitle:'Home',
                       viewSubtitle:'description',

                    }
                  },

               methods: {
                    YourMethod_1() {

                    },
                     YourMethod_2() {

                    },
                  }
                }
            </script>

【讨论】：

【解决方案3】：

这是最新版本的 Vue.js 与路由器一起使用的方式

import App from './App';
import VueRouter from 'vue-router';
import {routes} from './routes';
const router = new VueRouter({
   routes,
   mode: "history", // you can remove this if not required
});

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

routes.js

export const routes = [
  // your components as objects
]

App.vue

 <template>
    <div>
        <router-view/>
    </div>
 </template>

 <script>
    export default {
      name: "App"
    }
 </script>

【讨论】：