一级路由创建
1.在views文件夹中创建对应的路由页面组件
2.配置路由 在router下index.js中进行配置
(2-1)先把你要使用的组件页面引用
(2-2)配置路由规则
import Vue from 'vue'
import VueRouter from 'vue-router'
// 1.把你要使用的路由页面引用
import Fenlei from '../views/fenlei.vue'
import Gouwuche from '../views/gouwuche.vue'
import Home from '../views/home.vue'
import Jingxi from '../views/jingxi.vue'
import Wode from '../views/wode.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',//url路径
name: 'home',//给这个路由规则起个名字
component: HomeView //引用组件
},
// 下面是后面要学的
// {
// path: '/about',
// name: 'about',
// component: () => import('../views/AboutView.vue')
// }]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
3.在app.vue中设置router-view路由出口