首先安装vue-router,使用npm install vue-router --save,添加成功后在package.json 文件中可以看到引入的信息
先在 components文件下创建一个index,vue
配置路由内容,在src文件下创建router文件夹以及里面的index.js文件
import Vue from 'vue' // 引入vue import Router from 'vue-router' // 引入vue-router Vue.use(Router) // 使用路由组件 // 实例化路由并导出,也可以将实例化路由与导出分开写,根据个人习惯 /* * let router = new Router({}) * export default router * */ export default new Router({ mode: 'history', // 路由模式,分为hash,history两种,最明显的区别hash url带# http://localhost:8080/#/ history不带# http://localhost:8080/ routes: [ { path: '/', // url的路径 name: 'home', // 路由的名称 component: () => import('../components') /* * 推荐写法() => import() 路由懒加载,处理页面首次打开等待时间长的问题 * '../components' 等同于 '../components/index.vue',引入页面为index的情况下,可以省略不写,非index文件,后面的.vue也可以省略 * 项目不大的情况下使用以下方法也没啥问题 * import home from '../components' * component: home * */ } ] })
配置完毕router文件后,去main.js中将路由注册进去
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 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, // 注册路由 components: { App }, template: '<App/>' })
重要的一步,在根目录下App.vue文件中配置路由的显示
<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> </style>
这样就可以在页面中正常显示了
嵌套路由-子路由children使用
然后在home这个父页面中添加子路由的显示,
页面效果