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

Question

我正在努力了解 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 元素。我是不是明白了，一旦我使用路由器，一切都应该在组件中？

Answer 1

您可以使用默认表示法：

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

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

Answer 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>

Answer 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>

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

Vue router. Root Vue has no data?

vue.js

vue-router