Question

我正在创建一个Laravel网站，它将是一个单页面应用程序。即使我有一般的javascript经验，我也是VueJS的新手。

我需要显示多个路线，例如/blog/new，/blog/:id，/blog/edit等。/blog本身由Laravel定义，并作为博客索引。

我安装了vue-router，并试图按照我看到的一些例子，但没有任何反应：

app.js

import './bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';

const blogIndex = { template: require('./components/blog/index.vue') };
const blogNew = { template: require('./components/blog/new.vue')};

const routes = [
    {
        path: '/blog',
        component: blogIndex,
        name: 'blog-index'
    },

    {
        path: '/blog/new',
        component: blogNew,
        name: 'blog-new'
    }
];

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

Vue.use(VueRouter);
Vue.component('example', require('./components/Example.vue'));
Vue.component('navbar', require('./components/Navbar.vue'));
Vue.component('blog_index', require('./components/blog/index.vue'));
console.log(testvar);

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

组件/博客/ index.vue

<template>
    <div>
        <h1>Blog index</h1>
        <router-link :to="{ name: 'blog-new' }">New article</router-link>
        <router-view></router-view>
    </div>

</template>

<script>
   export default {
       mounted() {
           console.log('blog#index mounted');
       }
   }
</script>

组件/博客/ new.vue

<template>
    <h2>Here is blog/new y'all</h2>
</template>

<script>
    export default {
        mounted() {
            console.log('blog#new mounted');
        }
    }
</script>

到目前为止，唯一有效的是我的地址栏被修改，但模板本身似乎没有被加载（我从/blog转到/blog/new）。

我已经看到我需要在我的html文件中添加<router-view></router-view>，但这会触发错误并阻止VueJS的显示。

我的问题是：我错过了什么，或者我做错了什么？

提前谢谢

Answer 1

您需要在主<router-view></router-view>文件中使用App.vue，这是新路由加载的部分。

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

您目前在components / blog / index.vue中声明了这一点 - 我认为这只适用于您的嵌套路由。 https://router.vuejs.org/en/essentials/nested-routes.html

单击Vue链接

1 个答案: