配置vue-router報錯、路由頁面不顯示問題
阿新 • • 發佈:2020-12-04
第一種:在index中建立好router例項,直接在main.js中引入
main.js
..................................
import Vue from 'vue'
import App from './App.vue'
import Router from 'vue-router'
import router from './router/index.js'
Vue.config.productionTip = false
new Vue({
router,//錯誤3:此處引入的例項名必須為router,否則會報錯
render: h => h(App),
}).$mount('#app')
....................................
index.js
....................................
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
Vue.use(Router)
const router = new Router({
mode:"history",
routes:[
{
path:'/',
redirect:HelloWorld
},
{
path:'/HelloWorld',
name:'HelloWorld',
component:HelloWorld
}
]
})
export default router //錯誤1:export default {router},頁面不顯示(export default用法出錯: https://blog.csdn.net/hsany330/article/details/81001603)
......................................
第二種:將routes單獨引入,在main.js中建立router例項
main.js
..................................
import Vue from 'vue'
import App from './App.vue'
import Router from 'vue-router'
import routes from './router/index.js'
Vue.config.productionTip = false
Vue.use(Router)
const router = new Router({
mode:"history",
routes:routes
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
....................................
index.js
....................................
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
const routes = [
{
path:'/',
redirect:HelloWorld
},
{
path:'/HelloWorld',
name:'HelloWorld',
component:HelloWorld
}
]
export default routes
......................................
APP.vue
......................................
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<router-link to="/HelloWorld">你好</router-link>
<router-view ></router-view> //錯誤2:不寫<router-view>,頁面不顯示
</div>
</template>
<script>
export default {
name: 'app',
components: {},
created() {
console.log(this.$route);
console.log(this.$router);
}
}
</script>
...................................................