vue2.0 router遇到的问题

来源：互联网发布：品浪渔具淘宝店促销编辑：程序博客网时间：2024/05/16 01:08

昨天按照教程安装好vue-router模块后，在应用中引入router 发现没有router.map方法，百度后原来是vue2.0里的路由改了

// 1. 定义（路由）组件。// 可以从其他文件 import 进来const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }// 2. 定义路由// 每个路由应该映射一个组件。 其中"component" 可以是// 通过 Vue.extend() 创建的组件构造器，// 或者，只是一个组件配置对象。// 我们晚点再讨论嵌套路由。const routes = [  { path: '/foo', component: Foo },  { path: '/bar', component: Bar }]// 3. 创建 router 实例，然后传 `routes` 配置// 你还可以传别的配置参数, 不过先这么简单着吧。const router = new VueRouter({  routes // （缩写）相当于 routes: routes})// 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由，// 从而让整个应用都有路由功能const app = new Vue({  router}).$mount('#app')

这是官方代码，这里有一个问题官方的组件写在index.html里的，我的是写在app.vue中的所以第四步要写成

/ 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由，// 从而让整个应用都有路由功能const app = new Vue({    router:router,    render: h => h(App)}).$mount('#app')

render函数是渲染一个视图，然后提供给el挂载，所以不加的话就是空白什么都没有

上面的修改完后继续跑，接着又报错You are using the runtime-only build of Vue where the template option is not available.

弄了一下午愣是没弄好，最后在知乎上看到说是vue会打包生成3个文件一个是 runtime only 的文件 vue.common.js，一个是 compiler only 的文件 compiler.js，一个是 runtime + compiler 的文件 vue.js。

用 webpack 的别名功能把 vue/dist/vue.js 命名成了 vue，不然vue 的 package.json 中的 main 指向的是 dist/vue.common.js。

webpack.config.js

resolve: {        alias: {            'vue': 'vue/dist/vue.js'        }    },

期待已久的页面总算出来了

1 1