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

Question

我正在努力理解vue-router。我习惯于像这样实例化Vue...

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

现在我被要求通过路由器实例化它...

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

我的问题是，我应该把我的data或methods，或者其他我通常使用的Vue属性放在哪里？ 我看到我的根Vue可以有标记，带有router-link元素。我是否应该理解，一旦我使用路由器，所有内容都应该在组件中？

- bbsimonbb

Answer 1

你可以使用默认符号表示法：

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

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

- Thomas

Answer 2

这就是最新版本的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>

- Rijosh

Answer 3

在你的 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>

- Garry