一、安装vue-router.js
npm install vue-router -S
二、在src中创建views文件夹，存放页面级路由组件
创建所需的页面级路由组件
Index.vue
Category.vue
Star.vue
Cart.vue
My.vue
步骤
在views中创建Index.vue
输入"vue",回车，生成基本代码结构
-
在template中创建div
<template> <div class="index"> 首页的内容 </div> </template>
三、在src下创建router文件夹，创建index.js文件,进行路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//引入页面级路由组件
import Index from '@/views/Index.vue'
//路由配置
const routes = [
{
path: '/',
component: Index
}
.....
]
//创建路由对象
const router = new VueRouter({
routes
})
//导出路由对象
export default router
四、在main.js中引入路由并注册
import router from './router/index.js'
......
new Vue({
router: router
})
五、在根组件App.vue中使用<router-view>组件和<router-link>组件
<template>
<div id="app">
<router-view></router-view>
<div class="footer">
<router-link to="/">首页</router-link>
</div>
</div>
</template>
地址栏路径不同，会根据路由配置，在router-view中显示对应的路由组件
