首先在网上照着一个教程学习vue路由配置,但后来发现版本并不一直,还是多少有点差别,所以自写了vue2.0 + webpack的路由配置。
首先在App.vue里:
<template>
<!-- <div id="app">
<img src="./assets/logo.png">
<router-view/>
</div> -->
<div id ="app">
<div class="tab">
<div class="tab-item">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<
router-link
to=
"/goods"
>商品
</
router-link
>
</
div
>
<
div
class=
"tab-item"
>
<
router-link
to=
"/bar"
>评价
</
router-link
>
</
div
>
<
div
class=
"tab-item"
>
<
router-link
to=
"/"
>商家
</
router-link
>
</
div
>
</
div
>
<
router-view
></
router-view
>
</
div
>
</
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:
'<div>foo</div>' }
const
Bar = {
template:
'<div>bar</div>' }
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')