首先在网上照着一个教程学习vue路由配置,但后来发现版本并不一直,还是多少有点差别,所以自写了vue2.0 + webpack的路由配置。
首先在app.vue里:
<template> <!-- <p id="app"> <img src="./assets/logo.png"> <router-view/> </p> --> <p id ="app"> <p class="tab"> <p class="tab-item"> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/goods">商品</router-link> </p> <p class="tab-item"> <router-link to="/bar">评价</router-link> </p> <p class="tab-item"> <router-link to="/">商家</router-link> </p> </p> <router-view></router-view> </p> </template>
在main.js里:
import vue from 'vue' import app from './app' import vuerouter from 'vue-router' vue.config.productiontip = false vue.use(vuerouter) /* eslint-disable no-new */ const foo = { template: '<p>foo</p>' } const bar = { template: '<p>bar</p>' } const routes = [ { path:"/foo", component: foo }, { path: "/bar", component: bar }, ] var router = new vuerouter({ routes }) const app = new vue({ el: '#app', router, render: h => h(app) }).$mount('#app')
记住vuerouter的引入不能用npm安装时自带的“import vuerouter from ‘./router’”,要换成“import vuerouter from ‘vue-router’”
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
网友评论