vue路由的配置
安装:npm install vue-router
将路由模块抽离为单独的js文件
新建文件 /src/router/index.js
在index.js文件配置:
import Vue from 'vue'
import router from 'vue-router'
//导入需要路由映射的组件
import HelloWorld from '../components/HelloWorld.vue'
//实例化并导出路由对象
export default new router({
routes:[{
path:'/',
component:HelloWorld
}]
})
在main.js中全局引用路由
import Vue from 'vue'
import App from './App'
import router from './router/index'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
关于:Cannot read property ‘matched’ of undefined错误
这个错误的原因的在main.js导入路由的时候
import Router from './router/index'
new Vue({
el: '#app',
Router,
components: { App },
template: '<App/>'
})
把Router改成router就可以了
原因,在
new Vue({
//...
Router,//简写,相当于:Router:Router
//...
})
的时候,router才是vue路由实例化配置的字段(键),这是固定的,换成其他的vue就不认得了
vue路由就是通过地址栏的地址,映射出对应的组件并渲染出来