vue之手写路由
vue之手写路由
1准备一个没有路由的项目
2检测
通过对比检查配置package.jsonpackage.json文件可知当前没有配置路由
3安装指令 npm i vue-router
使用cmd或者vscode的终端打开项目 安装路由指令npm i vue-router
4添加router和views
1在创建router文件并在其中添加index.js文件。
①在index.js中导入vue和VueRouter
②注册路由插件
③配置路径
④创建路由实例
⑤导出路由
2在src下创建视图文件夹views并添加home页和about页
5配置app.vue和main.js根节点并查看效果
1app.vue
①添加home路由入口和about路由入口Home |
②添加视图
2main.js
①导入路由import router from ‘./router/index.js’
②挂载实例