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没有数据？

3 个答案: