问题原因
路由配置重名(可用Ctrl+单击 查看是否跳转到正确文件夹)
详解:
在导入vue-router
时,router有自身的命名规范
—>必须包含“Router”字符,且大小写全局唯一。
即别的地方在命名时不能完整包含“Router”字符
import VueRouter from "vue-router";
★解决方法
改变入口main.js
入口文件main.js
中路由与路由文件重名了(大小写或拼写重复都会引发这种问题)
将main.js
中的 Router 改为 router 便可
import router from './router' // 自动扫码里面的路由配置
new Vue({
el: '#app',
// 配置路由
router,
components: { App },
template: '<App/>'
})
我的配置
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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,
components: { App },
template: '<App/>'
})
./router/index.js
import Vue from 'vue'
import VueRouter from "vue-router";
import Content from "../components/Content";
import Main from "../components/Main";
// 安装路由
Vue.use(VueRouter);
// 配置导出路由
export default new VueRouter({
routes:[
{
// 路由路径
path:'/content',
name:'content',
// 跳转的组件
component:Content
},{
path: '/main',
name: 'main',
component: Main
}
]
})