使用 Vuetify 和 router 如何让 vue router 改变组件？ URL 正在更新，但组件未更新答案

【问题标题】：Using Vueitify and router How do I make vue router change components? URL is updating but component is not使用 Vuetify 和 router 如何让 vue router 改变组件？ URL 正在更新，但组件未更新
【发布时间】：2020-11-12 13:53:46
【问题描述】：

我正在开发一个使用 vuetify 和 vue 路由器的单页 vue 应用程序。

一切都指向我的路线被识别：

它们正确地出现在 vue 工具中，无论是历史记录还是路由
地址栏的url和参数变化正常

但是，与路由关联的组件未显示。它只是停留在我的主页组件上。我没有收到任何控制台错误。

我觉得我的 app.js 主文件的设置方式可能有点混乱。我对 Vue 非常陌生，可能无法掌握一切如何协同工作。我尝试在不同的地方导入东西，更改路线名称，删除 vuetify，但最终我无法让组件随路线而改变。

app.js

import Vue from 'vue'
import vuetify from './plugins/vuetify'
import router from "./router";

import myDefaultView from './Views/myDefaultView'

Vue.component('myDefaultView', myDefaultView)

Vue.config.productionTip = false

//thinking something in this bit might not be right
new Vue({
    router,
    vuetify,
    render: h => h(myDefaultView)
}).$mount('#app')

router.js

import Vue from "vue";
import Router from "vue-router";
import myDefaultView from './Views/myDefaultView'
import userPage from "./Views/userPage";

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: "/",
            name: "home",
            component: myDefaultView
        },
        {
            path: "/user/:userId",
            name: "userPage",
            component: userPage

        },
    ]
});

myDefaultView.vue

//only relevant code included
<template>
        <v-main>
            <template>
                <v-data-table
                        @click:row="goToUserPage"
                        :headers="headers"
                        :items="users"
                        :items-per-page="15"
                        class="elevation-1"
                >
                </v-data-table>
            </template>
</template>

<script>
    import axios from 'axios';
    import router from "../router";

    export default {
        props: {
            source: String,
        },
        data () {
            return {
                users: [],
                headers: [
                    {
                        text: 'User Name',
                        align: 'left',
                        sortable: true,
                        value: 'user.name',
                        class: 'text-subtitle-1'
                    },
                    { text: 'Date joined', value: 'user.joined'},
                    { text: 'Points ', value: 'user.points' },
                    
                ],
            }
        },
        created () {
            this.$vuetify.theme.dark = true
        },
        mounted () {
            this.getUsers();
        },
        methods: {

            getUsers() {
                axios.get("http://local.getusers.com)
                    .then(response => {
                        this.users = response.data;
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },

            goToUserPage(item,row) {
                router.push({ name: 'userPage', params: { userId: row.item.user.id } })
            }
        }

    }


</script>

userPage.vue

<template>
    <span>This vue is arbitrary, if I could just get it to display I could make it more cool</span>
</template>

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

<style scoped>

</style>

【问题讨论】：

Ref: "//仅包含相关代码"：模板的相关部分是<router-view> 标签。这就是渲染当前路由解析的组件的原因。如果您将其移除，则路线会成功更改，但不会呈现任何内容。
是的。这样就可以了。我不知道我的模板中需要标记。现在正在运行。

标签： javascript vue.js vuejs2 vuetify.js vue-router

【解决方案1】：

路由在 Vue 中的工作方式是：你有一个包含 <router-view> 的应用组件。此标签将被当前路由解析到的组件替换。

如果您想一直显示其他任何内容（侧边栏、菜单或页脚）（无论当前路线如何），也可以将它们放在应用组件中。
将它们放在应用程序中并不意味着它们无法对路线更改做出反应。这仅意味着它们不会在路由更改时重新渲染，这很好，因为您可能希望将它们从一个状态很好地转换到另一个状态。

将您想要在路由更改时重新渲染（或不渲染）的任何内容放入由路由器解析的组件内。

附带说明，使用@vue/cli 的create 命令创建一个新的 Vue 项目将创建一个基本但完整的工作路由器（如果您从创建脚本问题中选择路由器选项）。
另请注意，您可以在每个路由中添加更多 <router-view> 标签，以显示页面的子页面。

文档here.

【讨论】：