配置vue-router報錯、路由頁面不顯示問題


第一種:在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> 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM