经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue-route路由管理的安装与配置方法
来源:jb51  时间:2021/7/19 15:33:02  对本文有异议

介绍

Vue RouterVue.js官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式,在 IE9 中自动降级
  • 自定义的滚动条行为

安装

安装命令

  1. npm install vue-router --save

如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3.  
  4. Vue.use(VueRouter)

模块化使用

之前我们使用脚手架vue-cli创建项目时,实际已经配置好了router,创建完项目后,在项目根目录下会有一个router文件夹,router下有一个index.js文件,内容如下:

  1. import Vue from "vue";
  2. import VueRouter from "vue-router";
  3. import Home from "../views/Home.vue";
  4.  
  5. // 1. 当我们使用其他插件的时候,就必须使用Vue.use安装插件
  6. Vue.use(VueRouter);
  7.  
  8. // 2. 定义路由,每个路由应该映射一个组件
  9. const routes = [
  10. {
  11. path: "/",
  12. name: "Home",
  13. component: Home,
  14. },
  15. {
  16. path: "/about",
  17. name: "About",
  18. component: About
  19. },
  20. ];
  21.  
  22. // 3. 创建router实例
  23. const router = new VueRouter({
  24. // 配置路由和组件之间的应用关系
  25. routes, // (缩写) 相当于 routes: routes
  26. });
  27.  
  28. // 4. 导出router对象,然后在main.js中引用
  29. export default router;

这个文件是专门配置路由的,最后将router对象导出后,我们在项目的main.js中引用即可

  1. import Vue from "vue";
  2. import App from "./App.vue";
  3. import router from "./router";
  4.  
  5. Vue.config.productionTip = false;
  6.  
  7. new Vue({
  8. router, // 在vue实例中添加router对象,就可以使用路由了
  9. render: (h) => h(App),
  10. }).$mount("#app");

我们的2个组件代码AboutHome代码如下:

  1. // About.vue
  2. <template>
  3. <div class="about">
  4. <h1>About</h1>
  5. </div>
  6. </template>
  7.  
  8. <script>
  9. export default {
  10. name: "About"
  11. }
  12. </script>
  13.  
  14. <style scoped>
  15. </style>
  16.  
  17. // Home.vue
  18. <template>
  19. <div class="home">
  20. <h1>Home</h1>
  21. </div>
  22. </template>
  23.  
  24. <script>
  25.  
  26. export default {
  27. name: "Home",
  28. };
  29. </script>
  30.  
  31. <style scoped>
  32. </style>

最后我们在App.vue中,写入如下代码:

  1. template>
  2. <div id="app">
  3. <router-link to="/">首页</router-link>
  4. <router-link to="/about">关于</router-link>
  5. <router-view></router-view>
  6. </div>
  7. </template>
  8.  
  9. <style lang="scss">
  10. </style>

使用<router-link>来加载链接,然后使用to表示跳转的链接。最终会把<router-link>渲染成<a>标签。
<router-view>是路由的出口,也就是相应url下的代码会被渲染到这个地方来。

HTML5 history模式

但是当我们启动程序,访问页面的时候,url地址上会出现#

这是因为vue-router 默认 hash 模式 —— 使用 URLhash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

  1. const router = new VueRouter({
  2. mode: 'history',
  3. routes: [...]
  4. })

我们只需在router文件夹下的index.js中添加modehistory即可,之后重新访问,http://localhost:8080/就不会有#号了

注意:history模式还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问其他url地址就会返回 404,这就不好看了。

所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

到此这篇关于vue-route路由管理的安装与配置 的文章就介绍到这了,更多相关vue route安装与配置 内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号