1. 程式人生 > 實用技巧 >配置vue-router報錯、路由頁面不顯示問題

配置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> ...................................................