Vue.js 2 路由器仅从导航而不是从 URL 加载组件
Vue.js 2 router only loading component from navigation and not from URL
从菜单中单击以查看页面内容时,会加载正确的组件。但是,当我直接从 URL 转到它时,它没有。
这是主页(加载菜单):
<template>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<router-link to="/new-page" type="button" class="btn btn-primary btn-lg btn-block">New page</router-link>
<div class="list-group sidebar">
<router-link v-for="page in pages" class="list-group-item" :to="'/pages/' + page.slug">{{ page.menu_title }}</router-link>
</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-9">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
computed: {
pages() {
return this.$store.state.pages
}
},
created() {
this.$http.get('pages').then((response) => {
this.$store.commit('setPages', response.body)
console.log(response)
}, (response) => {
console.log("Error: " + response)
})
}
}
</script>
这是根据单击的页面类型加载内容类型的内容。您可以使用多个模板重新加载不同的数据(这部分没问题)
<template>
<div>
<div class="loader" v-if="loading">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<div v-if="!loading">
<vc-gig :content="content" v-if="content.type == 'gig'"></vc-gig>
<vc-news :content="content" v-if="content.type == 'news'"></vc-news>
<vc-home :content="content" v-if="content.type == 'home'"></vc-home>
<vc-image :content="content" v-if="content.type == 'image'"></vc-image>
</div>
</div>
</template>
<script>
import Gig from '../Gig.vue'
import News from '../News.vue'
import Home from '../Home.vue'
export default {
components: {
'vc-gig': Gig,
'vc-news': News,
'vc-home': Home,
},
data() {
return {
loading: true,
content: [],
}
},
created() {
this.getPageData
},
watch: {
'$route': 'getPageData'
},
methods: {
getPageData() {
this.loading = true
this.$http.get('pages/' + this.$route.params.pageSlug).then((response) => {
this.content = response.body
this.loading = false
console.log(response.body)
}, (response) => {
console.log(response)
})
}
}
}
</script>
单击菜单时(在第一个代码部分)所有组件都正确加载,但如果我在浏览器中手动添加 URL,页面内容(第二个代码部分)将不会加载。
更新:这是我的完整 routes.js
文件:
import Vue from 'vue'
import VueRouter from 'vue-router'
// Public
import Home from './views/Pages/Home.vue'
// Authentication
import Login from './views/Auth/Login.vue'
import Register from './views/Auth/Register.vue'
import Onboarding from './views/Auth/Onboarding.vue'
import ResetPassword from './views/Auth/ResetPassword.vue'
// Pages & Items
import Pages from './views/Pages/Layout/PageMaster.vue'
import Page from './views/Pages/Layout/PageSinge.vue'
import Item from './views/Pages/Layout/PageItem.vue'
import NewPage from './views/Pages/NewPage.vue'
// Options
import Options from './views/Options/Layout/OptionsMaster.vue'
import Themes from './views/Options/Themes.vue'
import Logo from './views/Options/Logo.vue'
import SocialMediaIcons from './views/Options/SocialMediaIcons.vue'
import WebsiteTitle from './views/Options/WebsiteTitle.vue'
import DomainName from './views/Options/DomainName.vue'
import Meta from './views/Options/Meta.vue'
import AnalyticsWebtools from './views/Options/AnalyticsWebtools.vue'
// My Account
import Account from './views/Account/Layout/AccountMaster.vue'
import Billing from './views/Account/Billing.vue'
import Details from './views/Account/Details.vue'
import Password from './views/Account/Password.vue'
Vue.use(VueRouter)
const Router = new VueRouter({
mode: 'history',
routes: [
{
path: '/login',
name: 'login',
component: Login,
meta: {guest: true}
},
{
path: '/register',
name: 'register',
component: Register,
meta: {guest: true}
},
{
path: '/reset-password',
name: 'reset-password',
component: ResetPassword,
meta: {guest: true}
},
{
path: '/onboarding',
name: 'onboarding',
component: Onboarding
},
{
path: '/',
name: 'home',
redirect: 'pages/home',
component: Home,
meta: {auth: true}
},
{
path: '/new-page',
name: 'newpage',
component: NewPage,
meta: {auth: true}
},
{
path: '/pages',
name: 'pages',
redirect: 'pages/home',
component: Pages,
meta: {auth: true},
children: [
{
path: ':pageSlug',
name: 'page',
component: Page,
},
]
},
{
path: '/pages/:pageSlug/:itemSlug',
name: 'item',
component: Item,
meta: {auth: true}
},
{
path: '/options',
name: 'options',
redirect: 'options/themes',
component: Options,
meta: {auth: true},
children: [
{
path: 'themes',
name: 'themes',
component: Themes
},
{
path: 'logo',
name: 'logo',
component: Logo
},
{
path: 'social-media-icons',
name: 'socialmediaicons',
component: SocialMediaIcons
},
{
path: 'website-title',
name: 'sitetitle',
component: WebsiteTitle
},
{
path: 'domain-name',
name: 'domain',
component: DomainName
},
{
path: 'meta-text-image',
name: 'meta',
component: Meta
},
{
path: 'analytics-webtools',
name: 'tools',
component: AnalyticsWebtools
},
]
},
{
path: '/account',
name: 'account',
component: Account,
meta: {auth: true},
children: [
{
path: 'billing',
name: 'billing',
component: Billing
},
{
path: 'details',
name: 'details',
component: Details
},
{
path: 'password',
name: 'password',
component: Password
},
]
}
]
})
Router.beforeEach(function (to, from, next) {
// User is authenticated
if (to.matched.some(function (record) {
return record.meta.guest
}) && Vue.auth.loggedIn()) {
next({
path: '/pages'
})
} else {
next()
}
// User not authenticated
if (to.matched.some(function (record) {
return record.meta.auth
}) && !Vue.auth.loggedIn()) {
next({
path: '/login'
})
} else {
next()
}
})
export default Router
简单修复,您没有调用您创建的方法。
created() {
this.getPageData
},
应该是
created() {
this.getPageData()
},
也许使用 eslint 等 linter 也有助于避免这些错误。
编码愉快!
从菜单中单击以查看页面内容时,会加载正确的组件。但是,当我直接从 URL 转到它时,它没有。
这是主页(加载菜单):
<template>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<router-link to="/new-page" type="button" class="btn btn-primary btn-lg btn-block">New page</router-link>
<div class="list-group sidebar">
<router-link v-for="page in pages" class="list-group-item" :to="'/pages/' + page.slug">{{ page.menu_title }}</router-link>
</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-9">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
computed: {
pages() {
return this.$store.state.pages
}
},
created() {
this.$http.get('pages').then((response) => {
this.$store.commit('setPages', response.body)
console.log(response)
}, (response) => {
console.log("Error: " + response)
})
}
}
</script>
这是根据单击的页面类型加载内容类型的内容。您可以使用多个模板重新加载不同的数据(这部分没问题)
<template>
<div>
<div class="loader" v-if="loading">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<div v-if="!loading">
<vc-gig :content="content" v-if="content.type == 'gig'"></vc-gig>
<vc-news :content="content" v-if="content.type == 'news'"></vc-news>
<vc-home :content="content" v-if="content.type == 'home'"></vc-home>
<vc-image :content="content" v-if="content.type == 'image'"></vc-image>
</div>
</div>
</template>
<script>
import Gig from '../Gig.vue'
import News from '../News.vue'
import Home from '../Home.vue'
export default {
components: {
'vc-gig': Gig,
'vc-news': News,
'vc-home': Home,
},
data() {
return {
loading: true,
content: [],
}
},
created() {
this.getPageData
},
watch: {
'$route': 'getPageData'
},
methods: {
getPageData() {
this.loading = true
this.$http.get('pages/' + this.$route.params.pageSlug).then((response) => {
this.content = response.body
this.loading = false
console.log(response.body)
}, (response) => {
console.log(response)
})
}
}
}
</script>
单击菜单时(在第一个代码部分)所有组件都正确加载,但如果我在浏览器中手动添加 URL,页面内容(第二个代码部分)将不会加载。
更新:这是我的完整 routes.js
文件:
import Vue from 'vue'
import VueRouter from 'vue-router'
// Public
import Home from './views/Pages/Home.vue'
// Authentication
import Login from './views/Auth/Login.vue'
import Register from './views/Auth/Register.vue'
import Onboarding from './views/Auth/Onboarding.vue'
import ResetPassword from './views/Auth/ResetPassword.vue'
// Pages & Items
import Pages from './views/Pages/Layout/PageMaster.vue'
import Page from './views/Pages/Layout/PageSinge.vue'
import Item from './views/Pages/Layout/PageItem.vue'
import NewPage from './views/Pages/NewPage.vue'
// Options
import Options from './views/Options/Layout/OptionsMaster.vue'
import Themes from './views/Options/Themes.vue'
import Logo from './views/Options/Logo.vue'
import SocialMediaIcons from './views/Options/SocialMediaIcons.vue'
import WebsiteTitle from './views/Options/WebsiteTitle.vue'
import DomainName from './views/Options/DomainName.vue'
import Meta from './views/Options/Meta.vue'
import AnalyticsWebtools from './views/Options/AnalyticsWebtools.vue'
// My Account
import Account from './views/Account/Layout/AccountMaster.vue'
import Billing from './views/Account/Billing.vue'
import Details from './views/Account/Details.vue'
import Password from './views/Account/Password.vue'
Vue.use(VueRouter)
const Router = new VueRouter({
mode: 'history',
routes: [
{
path: '/login',
name: 'login',
component: Login,
meta: {guest: true}
},
{
path: '/register',
name: 'register',
component: Register,
meta: {guest: true}
},
{
path: '/reset-password',
name: 'reset-password',
component: ResetPassword,
meta: {guest: true}
},
{
path: '/onboarding',
name: 'onboarding',
component: Onboarding
},
{
path: '/',
name: 'home',
redirect: 'pages/home',
component: Home,
meta: {auth: true}
},
{
path: '/new-page',
name: 'newpage',
component: NewPage,
meta: {auth: true}
},
{
path: '/pages',
name: 'pages',
redirect: 'pages/home',
component: Pages,
meta: {auth: true},
children: [
{
path: ':pageSlug',
name: 'page',
component: Page,
},
]
},
{
path: '/pages/:pageSlug/:itemSlug',
name: 'item',
component: Item,
meta: {auth: true}
},
{
path: '/options',
name: 'options',
redirect: 'options/themes',
component: Options,
meta: {auth: true},
children: [
{
path: 'themes',
name: 'themes',
component: Themes
},
{
path: 'logo',
name: 'logo',
component: Logo
},
{
path: 'social-media-icons',
name: 'socialmediaicons',
component: SocialMediaIcons
},
{
path: 'website-title',
name: 'sitetitle',
component: WebsiteTitle
},
{
path: 'domain-name',
name: 'domain',
component: DomainName
},
{
path: 'meta-text-image',
name: 'meta',
component: Meta
},
{
path: 'analytics-webtools',
name: 'tools',
component: AnalyticsWebtools
},
]
},
{
path: '/account',
name: 'account',
component: Account,
meta: {auth: true},
children: [
{
path: 'billing',
name: 'billing',
component: Billing
},
{
path: 'details',
name: 'details',
component: Details
},
{
path: 'password',
name: 'password',
component: Password
},
]
}
]
})
Router.beforeEach(function (to, from, next) {
// User is authenticated
if (to.matched.some(function (record) {
return record.meta.guest
}) && Vue.auth.loggedIn()) {
next({
path: '/pages'
})
} else {
next()
}
// User not authenticated
if (to.matched.some(function (record) {
return record.meta.auth
}) && !Vue.auth.loggedIn()) {
next({
path: '/login'
})
} else {
next()
}
})
export default Router
简单修复,您没有调用您创建的方法。
created() {
this.getPageData
},
应该是
created() {
this.getPageData()
},
也许使用 eslint 等 linter 也有助于避免这些错误。
编码愉快!