>>分享孙卫琴的Java技术专稿和著作 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 8381 个阅读者 刷新本主题
 * 贴子主题:  【Vue.js技术专题】路由管理器的基本用法 回复文章 点赞(0)  收藏  
作者:sunweiqin    发表时间:2022-08-29 17:36:33     消息  查看  搜索  好友  邮件  复制  引用

本文参考孙卫琴,杜聚宾所创作的 <<精通Vue.js: Web前端开发技术详解>>一书

对于路由很复杂的应用,使用Vue Router可以简化对路由的管理,让源代码更加简洁、逻辑分明,而且容易进行模块化的开发。
在例程1的myroute.html中,引入了Vue Router插件:
  <script src="https://unpkg.com/vue-router@4"></script>

myroute.html通过Router路由管理器来管理路由,为HomeComponent组件和AboutComponent组件设定了路由。当用户在网页上选择特定的链接,路由管理器就会显示相应的组件。

例程1  myroute.html

    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>

    <!-- 或者使用下载到本地的JS文件
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    -->

    <div id="app">
      <p>
        <!-- 设置导航链接 -->
        <router-link to="/">主页</router-link> |
        <router-link to="/about">关于我们</router-link>
      </p>

      <!-- 插入与路由匹配的组件 -->
      <router-view></router-view>
    </div>

    <script>
      //定义组件
      const HomeComponent = { template: '<div>这是主页</div>' }
      const AboutComponent = { template: '<div>这是我们的介绍</div>' }

      // 定义组件的路由
      const myroutes = [
        { path: '/', component: HomeComponent },
        { path: '/about', component: AboutComponent },
      ]

      //创建路由管理器router实例
      const router = VueRouter.createRouter({
        //设置hash路由模式
        history: VueRouter.createWebHashHistory(),
        //设置路由
        routes: myroutes  
      })

      const app = Vue.createApp({})
      app.use(router)       //使用路由管理器
      app.mount('#app')
    </script>

在myroute.html中,根组件模板中的<router-link>组件和<router-view>组件都来自于Router路由管理器。<router-link>组件用来生成导航链接:

   <router-link to="/">主页</router-link> |
   <router-link to="/about">关于我们</router-link>

以上代码渲染后的结果为:

<a href="#/" >主页</a> |
<a href="#/about" >关于我们</a>

根组件模板中的<router-view>组件会根据当前的路由显示相应的组件。假如用户访问的URL为“myroute.html#/about”,那么<router-view>组件就会显示相应的AboutComponent组件。<router-view>组件可以放置在模板的任意位置,相当于一个占位标记,实际要显示的组件会被插入到<router-view>组件所在的位置。

在myroute.html的JavaScript脚本中创建了一个路由管理器实例router:

const router = VueRouter.createRouter({
  //设置hash路由模式
  history: VueRouter.createWebHashHistory(),
  //设置路由
  routes: myroutes  
})

路由管理器的history属性指定路由模式,本章11.4节会进一步介绍路由模式的概念。路由管理器的routes属性指定路由,即网页中待显示的各个组件和链接的对应关系。

Vue应用实例的use(router)函数使得路由管理器会对应用进行路由管理:

const app = Vue.createApp({})
app.use(router)       //使用路由管理器
app.mount('#app')

通过浏览器访问myroute.html,会得到如图1所示的网页。
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小
图1  myroute.html的网页

在myroute.html网页上选择“主页”或“关于我们”的链接,路由管理器就会根据它的routes属性所设定的路由,显示相应的HomeComponent组件或AboutComponent组件。





程序猿的技术大观园:www.javathinker.net
  Java面向对象编程-->集合(下)
  JavaWeb开发-->Servlet技术详解(Ⅰ)
  JSP与Hibernate开发-->映射一对多关联关系
  Java网络编程-->安全网络通信
  精通Spring-->虚拟DOM和render()函数
  Vue3开发-->Vue组件开发高级技术
  【Vue.js技术专题】Vue组件的命名规则
  【Vue.js技术专题】注册全局组件和局部组件
  【Vue.js技术专题】命名路由
  【Vue.js技术专题】分割setup()函数
  【Vue.js技术专题】插槽slot的基本用法
  【Spring Cloud Alibaba专题】GateWay的内置断言工厂
  【Spring Cloud Alibaba专题】Dubbo框架中提供者回调消费者
  【Spring专题】@Query和@Modifying注解的增删改操作
  【持久化专题】@Access注解设定Hibernate访问类的属性的方式
  【持久化专题】JPA API的基本用法
  【Java网络编程专题】用java.net.URL类访问HTTP服务器读取网...
  【Java网络编程专题】创建基于SSL的安全服务器和安全客户的范...
  【Java网络编程专题】异步通道和异步运算结果
  【持久化专题】比较JPA的EntityManager接口与Hibernate的Ses...
  【JavaWeb专题】在Servlet中利用Apache开源类库实现文件上传
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。