一、安装vue-router.js

npm install vue-router -S

二、在src中创建views文件夹，存放页面级路由组件

创建所需的页面级路由组件

Index.vue
Category.vue
Star.vue
Cart.vue
My.vue

image.png

步骤

1. 在views中创建Index.vue

2. 输入"vue",回车，生成基本代码结构

3. 在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中显示对应的路由组件