|
|
本文参考孙卫琴，杜聚宾所创作的 <<精通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所示的网页。
图1 myroute.html的网页
在myroute.html网页上选择“主页”或“关于我们”的链接，路由管理器就会根据它的routes属性所设定的路由，显示相应的HomeComponent组件或AboutComponent组件。
程序猿的技术大观园：www.javathinker.net
|
|
Java技术网站 → 『 Java开发技术 』 → 『 孙卫琴姐姐的Java技术专栏 』 → 【Vue.js技术专题】路由管理器的基本用法
消息
查看
搜索
好友
邮件
复制
引用
IP: 已设置保密