编辑器:vscode(喜欢什么编辑器用什么)
cmd:cmder(喜欢什么终端用什么)
在使用 vue-cli 中安装好的项目中需要自行安装 vue-router```BASHnpm install vue-router或者yarn add vue-router ```vue-cli3 脚手架中已经把集合了 vue-router ,在搭建项目的时候可以选择安装 ,不需要在额外的安装。END
通过 Vue.use() 手动引入/明确地安装路由功能:import Router from 'vue-router'Vue.use(Router)创建一个路由文件,router.js(其他自己喜欢的名称都ok),引入 vue-router
vue.js 做的是单页面应用,通过 vue-router 路由设置,加载不同的模板,达到页面改变的效果。那么 vue-router 是怎么工作的呢?vue.js: 使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,Vue Router : 组件 (components) 映射到路由 (routes), Vue Router 通过路由配置知道在渲染 对应的组件。
① app.vue 文件:设置路由出口,1. app.vue 就是根组件,2.
⑤router.js 文件:路由配置 将组件,与 路径匹配,如下图配置, 打开浏览器输入http://127.0.0.1:3000/(根据自己的项目设计更改端口),http://127.0.0.1:3000/login 进入登录页面http://127.0.0.1:3000/home 进入主页http://127.0.0.1:3000/login 进入注册页面END
① home.vue 文件
② router.js 路由配置二级路由在一级路由里面配置,二级路由写在 children 里面,属于孩子。END
mode 的设置:这个 mode 是设置 url 地址中的#号是否需要history: URL 就像正常的 url,例如 `http://。。。.com/a/`也好看!而不是`http://jsapng.com/#/lms/`跳转页面的时候还会出现闪烁。hash: URL 就像正常的 url,例如 `http://。。。.com/#/a/`也好看! `跳转页面的时候还会出现闪烁。也不美观
跳转页面的时候可能会发生错误,就要设置一个 404 页面,跳转错误的时候默认会跳转这个页面~~~
学无止境~~~~~~~~~~·