0
点赞
收藏
分享

微信扫一扫

孙卫琴的《精通Vue.js》读书笔记-路由管理器的基本用法


孙卫琴的《精通Vue.js》读书笔记-路由管理器的基本用法_vue.js


对于路由很复杂的应用,使用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路由管理器。组件用来生成导航链接:

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

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

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

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

在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所示的网页。

孙卫琴的《精通Vue.js》读书笔记-路由管理器的基本用法_应用实例_02

图1 myroute.html的网页

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


举报

相关推荐

0 条评论