vue-router的两种模式(vue-route路由管理的安装与配置方法)
vue-router的两种模式
vue-route路由管理的安装与配置方法介绍Vue Router
是 Vue.js
官方的路由管理器。它和 Vue.js
的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式,在 IE9 中自动降级
- 自定义的滚动条行为
安装命令
npm install vue-router --save
如果在一个模块化工程中使用它,必须要通过 Vue.use()
明确地安装路由功能:
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
之前我们使用脚手架vue-cli
创建项目时,实际已经配置好了router
,创建完项目后,在项目根目录下会有一个router
文件夹,router
下有一个index.js
文件,内容如下:
import Vue from "vue"; import VueRouter from "vue-router"; import Home from "../views/Home.vue"; // 1. 当我们使用其他插件的时候,就必须使用Vue.use安装插件 Vue.use(VueRouter); // 2. 定义路由,每个路由应该映射一个组件 const routes = [ { path: "/", name: "Home", component: Home, }, { path: "/about", name: "About", component: About }, ]; // 3. 创建router实例 const router = new VueRouter({ // 配置路由和组件之间的应用关系 routes, // (缩写) 相当于 routes: routes }); // 4. 导出router对象,然后在main.js中引用 export default router;
这个文件是专门配置路由的,最后将router
对象导出后,我们在项目的main.js
中引用即可
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; Vue.config.productionTip = false; new Vue({ router, // 在vue实例中添加router对象,就可以使用路由了 render: (h) => h(App), }).$mount("#app");
我们的2个组件代码About
和Home
代码如下:
// About.vue <template> <li class="about"> <h1>About</h1> </li> </template> <script> export default { name: "About" } </script> <style scoped> </style> // Home.vue <template> <li class="home"> <h1>Home</h1> </li> </template> <script> export default { name: "Home", }; </script> <style scoped> </style>
最后我们在App.vue
中,写入如下代码:
template> <li id="app"> <router-link to="/">首页</router-link> <router-link to="/about">关于</router-link> <router-view></router-view> </li> </template> <style lang="scss"> </style>
使用<router-link>
来加载链接,然后使用to
表示跳转的链接。最终会把<router-link>
渲染成<a>
标签。
<router-view>
是路由的出口,也就是相应url
下的代码会被渲染到这个地方来。
但是当我们启动程序,访问页面的时候,url
地址上会出现#
这是因为vue-router
默认 hash
模式 —— 使用 URL
的 hash
来模拟一个完整的 URL
,于是当 URL
改变时,页面不会重新加载。
如果不想要很丑的 hash
,我们可以用路由的 history
模式,这种模式充分利用 history.pushState API
来完成 URL
跳转而无须重新加载页面。
const router = new VueRouter({ mode: 'history', routes: [...] })
我们只需在router
文件夹下的index.js
中添加mode
为history
即可,之后重新访问,http://localhost:8080/
就不会有#
号了
注意:history
模式还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问其他url
地址就会返回 404,这就不好看了。
所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL
匹配不到任何静态资源,则应该返回同一个 index.html
页面,这个页面就是你 app
依赖的页面。
到此这篇关于vue-route路由管理的安装与配置 的文章就介绍到这了,更多相关vue route安装与配置 内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue编程加入购物车(vuex实现简单的购物车功能)
- vue 为什么使用虚拟dom(Vue虚拟Dom到真实Dom的转换)
- vue3.0安装element(vue3+electron12+dll开发客户端配置详解)
- vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
- vue过滤器filters怎么用(如何使用vue过滤器filter)
- vue导出动态的excel功能(vue中如何下载excel流文件及设置下载文件名)
- vue实现列表向上滚动更新(vue实现列表无缝滚动)
- vue过滤器使用思路(vue 过滤器和自定义指令的使用)
- vue 选中背景高亮(vue 如何设置背景颜色及透明度)
- vue怎么接收后台的数据(Vue封装全局toast组件的完整实例)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vuetable表格合并(vue-table实现添加和删除)
- vue3函数详解(手把手教你用vue3开发一个打砖块小游戏)
- vue渲染数据的过程(Vue前端高效开发之列表渲染指令)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- 览邦G08 Plus SMART WATCH 测评⑱ 全独立这才是智能手表该有的样子(览邦G08PlusSMART)
- 荣耀手表 GS 3 真机亮相 不支持无线充电(荣耀手表GS3)
- 通过体温就能为智能手表充电 原来是用NASA在空间站用的黑科技(通过体温就能为智能手表充电)
- 智能手表兼容Windows和Android 无需充电挑战苹果(智能手表兼容Windows和Android)
- 一天一冲也算表 麦步,一款待机 21 天的智能手表体验评测(一天一冲也算表)
- 魅族智能手表充电座曝光 Type-C 接口,线座分离设计(魅族智能手表充电座曝光)
热门推荐
- nginx+ssl配置详解(nginx配置ssl实现https的方法示例)
- docker的安装部署(Docker快速安装Zookeeper的详细教程)
- css3动画平移代码(利用CSS3实现炫酷的飞机起飞动画)
- docker启动nginx容器命令(Docker安装Nginx教程实现图例讲解)
- python opencv图像合并(Python3+OpenCV2实现图像的几何变换平移、镜像、缩放、旋转、仿射)
- docker安装与使用教程(5分钟安装docker详细步骤)
- 火狐浏览器状态栏的恢复
- nginx 重置端口号(详解如何修改nginx的默认端口)
- serv-u界面怎么设置中文(Serv-U 550 Permission denied 的解决办法)
- python中什么是迭代器(一篇文章彻底搞懂Python中可迭代Iterable、迭代器Iterator与生成器Generator的概)