步骤一:
在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件
默认设置如下:
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,
template: '<App/>',
components: { App }
})
自定义设置:
import
Vue
from
'vue'
import
App
from
'./App'
import
router
from
'./router'
import
VueResource
from
'vue-resource'
Vue.
use
(VueResource)
Vue.
config
.productionTip =
false
/* eslint-disable no-new */
new
Vue({
el
:
'#app'
,
router
,
render
: h => h(App)
})
如图:
步骤二:
App.vue文件是我们的组件入口,写入组件
<
template
>
<
div
>
<
v-header
></
v-header
>
<
div
class=
"tab"
>
<
div
class=
"tab-item"
>
<
router-link
to=
"/goods"
>
商品
</
router-link
>
</
div
>
<
div
class=
"tab-item"
>
<
router-link
to=
"/ratings"
>
评论
</
router-link
>
</
div
>
<
div
class=
"tab-item"
>
<
router-link
to=
"/seller"
>
商家
</
router-link
>
</
div
>
</
div
>
<
div
class=
"content"
>
</
div
>
<
router-view
></
router-view
>
</
div
>
</
template
>
<
script
>
import
header from
'./components/header/header.vue'
export default
{
name
:
'app'
,
components
: {
'v-header'
: header
}
}
</
script
>
<
style
>
.
tab
{
display
:
flex
;
width
:
100
%;
height
:
40
px
;
line-height
:
40
px
;
}
.
tab
.
tab-item
{
flex
:
1
;
text-align
:
center
;
}
</
style
>
步骤三:
在router/index.js文件中创建路由并配置路由映射 ,并通过export输出router到main.js文件中
import
Vue
from
'vue'
import
VueRouter
from
'vue-router'
Vue.
use
(VueRouter)
const
router
=
new
VueRouter({
mode
:
'history'
,
routes
: [
{
path
:
'/goods'
,
component
: require(
'../components/goods/goods.vue'
) },
{
path
:
'/seller'
,
component
: require(
'../components/seller/seller.vue'
) },
{
path
:
'/ratings'
,
component
: require(
'../components/ratings/ratings.vue'
) }
]
})
export default
router
//mode设置为history表示利用了history.pushState API来完成URL跳转而无须重新加载页面。
mode有三种模式如下:
I) hash模式:使用URL hash值来作为路由。支持所有浏览器。
II) history模式:依赖HTML5 History API和服务器配置。查看HTML5 History模式。
III) abstract模式:支持所有JavaScript运行环境,如Node.js服务器端。如果发现没有浏览器的API,路由会自动强制进入这个模式。
可以添加在
const router = new VueRouter({})里面,自定义
scrollBehavior 设置了滚动条起始位置。
linkActiveClass 设置当前选中项的样式类名
注意reouts不是router
vue2.0项目目录