问题描述
限时送ChatGPT账号..我正在学习 Vue,并从 webpack 模板开始.我尝试做的第一件事是添加对 Vue Router 的支持,但我现在已经花了几个小时而无法渲染单个路由(我总是以空白页面结束).令人沮丧!
我只想有一个 .vue
文件,作为布局文件,其中不同的 .vue
文件,作为页面",被渲染到.有人可以告诉我如何做到这一点吗?这是我最近一次失败的尝试:
main.js
从'vue'导入Vue从 'vue-router' 导入 VueRouter从'./App'导入应用程序从 './components/Home' 导入 Home从'./components/About'导入关于Vue.use(VueRouter)const 路由 = [{路径:'/',组件:首页},{ 路径:'/about',组件:关于}]const app = new Vue({路由器:新的VueRouter({路线}),组件:应用程序}).$mount('#app')
App.vue(布局文件)
<div id="应用程序"><h1>你好应用程序!</h1><p><router-link to="/">转到Foo</router-link><router-link to="/about">转到栏</router-link></p><路由器视图></路由器视图></模板><脚本>导出默认{}<样式范围></风格>
components/About.vue(几乎与 components/Home.vue 相同)
<div><h1>关于</h1><p>这是关于页面!</p></模板><脚本>导出默认{}<样式范围></风格>
解决方案 我终于让它工作了.main.js 文件应该这样写:
从'vue'导入Vue从 'vue-router' 导入 VueRouter从'./App'导入应用程序从./pages/Home"导入主页从'./pages/About'导入关于Vue.use(VueRouter)const 路由 = [{路径:'/',组件:首页},{ 路径:'/about',组件:关于}]const 路由器 = 新的 VueRouter({路线})const app = new Vue({路由器,模板:'<App/>',成分: {应用程序}}).$mount('#app')
我希望这可以为其他人节省数小时的麻烦.
编辑
以下内容:
const app = new Vue({路由器,模板:'<App/>',成分: {应用程序}}).$mount('#app')
最好替换为:
const app = new Vue({路由器,渲染:函数(创建元素){返回创建元素(应用程序)}}).$mount('#app')
I'm learning Vue, and started of with the webpack template. The first thing I'm trying to do is to add support for Vue Router, but I've spent several hours on it now without being able to render a single route (I always end up with a blank page). Frustrating!
I simply want to have a single .vue
file, acting as the layout file, into which different .vue
files, acting as "pages", are rendered into. Can someone tell me how to do this, please? Here's my latest failed attempt:
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Home from './components/Home'
import About from './components/About'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const app = new Vue({
router: new VueRouter({
routes
}),
component: App
}).$mount('#app')
App.vue (the layout file)
<template>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">Go to Foo</router-link>
<router-link to="/about">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
components/About.vue (almost identical to components/Home.vue)
<template>
<div>
<h1>About</h1>
<p>This is the about page!</p>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
解决方案
I finally got it to work. The main.js file should be written like this:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Home from './pages/Home'
import About from './pages/About'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router,
template: '<App />',
components: {
App
}
}).$mount('#app')
I hope this saves hours of trouble for someone else.
EDIT
The following:
const app = new Vue({
router,
template: '<App />',
components: {
App
}
}).$mount('#app')
can preferably be replaced with:
const app = new Vue({
router,
render: function(createElement){
return createElement(App)
}
}).$mount('#app')
这篇关于如何在 Vue 2 中使用 Vue Router的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论