一、安装vue-router.js
npm install vue-router -S
二、在src中创建views文件夹，存放页面级路由组件
创建所需的页面级路由组件
Index.vue
Category.vue
Star.vue
Cart.vue
My.vue
image.png
步骤
在views中创建Index.vue
输入"vue",回车，生成基本代码结构
-
在template中创建div
<template> <div class="index"> 首页的内容 </div> </template>
三、在src下创建router文件夹，创建index.js文件,进行路由配置
image.png
// 实现路由配置,路由的配置是全局的，也就是对整个App都起作用
// 该路由配置控制整个App的跳转
import Vue from 'vue';
import VueRouter from 'vue-router';
// 如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
Vue.use(VueRouter)
//引入页面级路由组件
// @/ 等价于 src/
import Index from '@/views/Index.vue'
import Car from '@/views/Car.vue'
import My from '@/views/My.vue'
import Cast from '@/views/Cast.vue'
import List from '@/views/List.vue'
//路由配置
const routes = [
{
path: '/',
component: Index
},
{
path: '/Car',
component: Car
},
{
path: '/My',
component: My
},
{
path: '/Cast',
component: Cast
},
{
path: '/List',
component: List
},
]
//创建路由对象
const router = new VueRouter({
routes
})
//导出路由对象
export default router
四、在main.js中引入路由并注册
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
......
new Vue({
// h是一个渲染dom的回调,将App组件渲染到id=app的dom结构中
render: h => h(App),
// #app： 即为public文件夹中index.html中的<div id="app"></div>
router: router
}).$mount('#app')
五、在根组件App.vue中使用<router-view>组件和<router-link>组件
<template>
<div id="app">
<router-view></router-view>
<div class="footer">
<router-link to="/" tag="p">首页</router-link>
<router-link to="/category" tag="p">分类</router-link>
<router-link to="/cart" tag="p">购物车</router-link>
<router-link to="/my" tag="p">我的</router-link>
</div>
</div>
</template>
地址栏路径不同，会根据路由配置，在router-view中显示对应的路由组件
