Vue Router前端路由
感受前端路由
1、简介
传统的Web应用程序不同页面间的跳转都是向服务器发起请求,服务器处理请求后向浏览器推送页面。在单页应用程序中,不同视图(组件的模板)的内容都是在同一个页面中渲染,页面间的跳转都是在浏览器端完成,这就需要用到前端路由。在Vue.js中,可以使用官方的路由管理器Vue Router。 Vue Router需要单独下载,可以使用CDN方式应用Vue Router
<script src="https://unpkg.com/vue-router@next"></script>
如果使用模块化开发,则使用npm安装方式,执行以下命令安装Vue Router。
npm install vue-router@next --save
提示:安装Vue Router时,要安装支持Vue3.0的新版本Vue Router,即这里的vue-router@next。支持vue2.0的Vue Router的版本名是vue-router。
2、HTML页面使用路由
前端路由的配置有固定的步骤。 (1)使用router-link组件设置导航链接
<router-link to="/">主页</router-link>
<router-link to="/news">新闻</router-link>
<router-link to="/books">图书</router-link>
<router-link to="/videos">视频</router-link>
to属性指定链接的URL,<router-link>
默认会被渲染为一个<a>
标签。
(2)指定组件在何处渲染,这是通过<router-view>
指定的。
<router-view></router-view>
(3)定义路由组件。
//定义路由组件
//可以从其他文件import进来
const Home={template:'<div>主页面</div>'}
const News={template:'<div>新闻页面</div>'}
const Books={template:'<div>图书页面</div>'}
const Videos={template:'<div>视频页面</div>'}
这里只是为了演示前端路由的基本用法,所以组件定义很简单。 (4)定义路由,将第(1)步设置的链接URL和组件对应起来。
//定义路由
//每个路由应该映射到一个组件
const routes=[
{path:'/',component:Home},
{path:'/news',component:News},
{path:'/books',component:Books},
{path:'/videos',component:Videos}
]
(5)创建VueRouter实例,将第(4)步定义的路由配置作为选项传递进去。
//传递routes选项,创建router实例
const router=VueRouter.createRouter({
//提供要使用的history实现。简单起见,在这里使用hash history
history:VueRouter.createWebHashHistory(),
routes //(简写)相当于routes:routes
})
(6)调用应用程序实例的use()方法,传入第(5)步创建的router对象,从而让整个应用程序具备路由功能。
const app=Vue.createApp({})
//使用路由器实例,从而让整个应用都具有路由功能
app.use(router)
app.mount('#app')
完整代码如下所示。 routers.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>
<!-- 使用router-link组件导航 -->
<!-- 通过to属性指定链接 -->
<!-- <router-link>默认会被渲染一个<a>标签 -->
<router-link to="/">主页</router-link>
<router-link to="/news">新闻</router-link>
<router-link to="/books">图书</router-link>
<router-link to="/videos">视频</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将在这里渲染 -->
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@next"></script>
<script>
//定义路由组件
//可以从其他文件import进来
const Home={template:'<div>主页面</div>'}
const News={template:'<div>新闻页面</div>'}
const Books={template:'<div>图书页面</div>'}
const Videos={template:'<div>视频页面</div>'}
//定义路由
//每个路由应该映射到一个组件
const routes=[
{path:'/',component:Home},
{path:'/news',component:News},
{path:'/books',component:Books},
{path:'/videos',component:Videos}
]
//传递routes选项,创建router实例
const router=VueRouter.createRouter({
//提供要使用的history实现。简单起见,在这里使用hash history
history:VueRouter.createWebHashHistory(),
routes //(简写)相当于routes:routes
})
const app=Vue.createApp({})
//使用路由器实例,从而让整个应用都具有路由功能
app.use(router)
app.mount('#app')
</script>
</body>
</html>
任意单击某个链接之后的渲染结果:
在创建router实例时,为选项history指定的是VueRouter.createWebHashHistory(),也就是hash模式,即使用URL的hash(即URL中的锚部分,从"#"开始的部分)模拟完整的URL,以便在URL更改时不会重新加载页面。
一般我们都是模块化开发路由的,见下一篇文章。 Vue模块化开发使用路由
相关文章
- Vue专题 05_详解vue生命周期的每个节点
- ruoyi-vue版本框架(一)如何下载源码,并且在本地启动
- JS之在Vue对象内部获取vue对象的索引(箭头函数的闭包导致this代表的是函数本身)「建议收藏」
- 解决:VUE同一路由强制刷新页面
- Vue笔记(10) vue-router
- 面试题vue双向绑定原理_vue路由面试题
- vue3 路由传参_vue router传参
- wangeditor富文本编辑器_vue使用富文本编辑器
- vue路由懒加载实现_vue路由懒加载实现原理
- VUE组件封装_vue组件内部双向绑定
- vue-router实现路由懒加载( 动态加载路由 )_前端懒加载原理
- Vue生成二维码_vue通过二维码分享
- Vue调试工具安装(vue devtools)
- Vue项目:菜农管理 【maven + spring boot + RESTFul + SSM+vue + axios】
- vue 中路径props的传参
- Vue Print-js 打印问题记录~
- java和vue的学生健康管理系统疫情打卡系统
- vue嵌套路由子路由 path 注意
- SortableJS / vue.draggable.next 使用笔记,持续记录
- 【前端】Vue VS React
- 初识vue.js模板语法
- js ajax 设置代理ip(vue Ajax 设置 代理ip)
- 使用Vue技术从MSSQL中获取数据(vue获取mssql数据)
- Vue.js 与MySQL结合,打造高效Web应用程序(vue.js mysql)
- Vue框架下的Redis调用实战(vue调用redis)
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- Vue操作Redis掌握前端数据管理利器(vue操作redis)
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)