라우팅 VUE 사용 : 정의의 '일치'형식 오류 캔 렌더링 오류 읽을 특성

VUE 라우터를 사용하는 경우 바보 같은 실수를 기억하십시오.

VUE 라우터를 사용하는 경우, 오류가 다음 웹 페이지를 엽니 다

처음에 나는 다시 설치 문제의이 지속 발견, 그것은 VUE 라우터가 설치되지 않은 생각했다. 면밀하게 조사한 후 문제가 라우터의 뷰 main.js에서 개체를 참조하지 않습니다 밝혔다 :

단계는 사용 VUE 라우터를 요약

• 먼저 후 VUE 라우터에 설치하는 index.js 라우터 구성 폴더 세 단계를 따라 분할 미만 :

import Vue from 'vue'
import VueRouter from 'vue-router'

// 采用懒加载的方式引入组件
const Home = () => import('../views/home/Home');

//1.安装插件
Vue.use(VueRouter);

//2.创建路由对象
const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  
]
const router = new VueRouter({
  routes,
  mode: "history"
})

//3.导出router
export default router

수출에 있습니다.

• 하는 index.js 도입 라우터는 main.js 내 보낸 객체와 새로운 뷰 객체에서 참조됩니다.

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //不要忘了引用router
  router,
  render: h => h(App)
})