多语言展示
当前在线:963今日阅读:3今日分享:40

前端 vue.js 框架 vue-router 路由设置全攻略

vue 系列中  vue-router 路由配置 详细教程~~~~~~~~~~~
工具/原料
1

编辑器:vscode(喜欢什么编辑器用什么)

2

cmd:cmder(喜欢什么终端用什么)

安装 vue-router
1

在使用 vue-cli 中安装好的项目中需要自行安装  vue-router```BASHnpm install vue-router或者yarn add  vue-router ```vue-cli3 脚手架中已经把集合了  vue-router ,在搭建项目的时候可以选择安装 ,不需要在额外的安装。END

引入 vue-router

通过 Vue.use() 手动引入/明确地安装路由功能:import Router from 'vue-router'Vue.use(Router)创建一个路由文件,router.js(其他自己喜欢的名称都ok),引入 vue-router

vue-router 工作原理

vue.js 做的是单页面应用,通过 vue-router 路由设置,加载不同的模板,达到页面改变的效果。那么 vue-router 是怎么工作的呢?vue.js:     使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,Vue Router :    组件 (components) 映射到路由 (routes), Vue Router 通过路由配置知道在渲染 对应的组件。

使用 vue-router(一级路由)
1

① app.vue 文件:设置路由出口,1.  app.vue 就是根组件,2. 路由出口、路由匹配到的组件将渲染在这里   加载的组件u,会在渲染在 区域中② home.vue 主页③ login.vue 登录页面④ register.vue 注册页面这里就不把 home ,login,register 写出来了,这里我们的目标是把 home ,login,register 做成各为一页的设计,它们同为一级路由

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

使用 vue-router(二级路由)
2

① home.vue 文件

3

② router.js 路由配置二级路由在一级路由里面配置,二级路由写在 children 里面,属于孩子。END

mode 的设置

mode 的设置:这个 mode 是设置 url 地址中的#号是否需要history:     URL 就像正常的 url,例如 `http://。。。.com/a/`也好看!而不是`http://jsapng.com/#/lms/`跳转页面的时候还会出现闪烁。hash:    URL 就像正常的 url,例如 `http://。。。.com/#/a/`也好看!   `跳转页面的时候还会出现闪烁。也不美观

404 页面的处理

跳转页面的时候可能会发生错误,就要设置一个 404 页面,跳转错误的时候默认会跳转这个页面~~~

注意事项

学无止境~~~~~~~~~~·

推荐信息