JS:CDN方式引入Vue-Router

简介: JS:CDN方式引入Vue-Router
<div id="app">
  <p>$route.name: {
        {$route.name}}</p>
  <p>$route.path: {
        {$route.path}}</p>
  <p>$route.query: {
        {$route.query}}</p>
</div>

<script src="/static/js/vue.js"></script>
<script src="/static/js/vue-router.js"></script>

<script>
  const router = new VueRouter({
    mode: "history", // 默认使用hash模式,url会出现#
  });

  const app = new Vue({
    router,
    el: "#app",
  });
</script>

显示结果

$route.name:


$route.path: /demo.html

$route.query: { "id": "44", "name": "Tom" }

单页面上使用vue-router,可以用来解析url上的参数

            </div>
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
3月前
|
开发框架 前端开发 JavaScript
在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
|
2月前
|
JSON JavaScript 前端开发
JavaScript 详解——Vue基础
【8月更文挑战第16天】
45 3
JavaScript 详解——Vue基础
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
20天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
36 3
|
2月前
|
JSON JavaScript 前端开发
Android调用Vue中的JavaScript代码
Android调用Vue中的JavaScript代码
18 3
|
2月前
|
JavaScript
Vue项目打包后都产生了哪些JS请求?
【8月更文挑战第19天】Vue项目打包后都产生了哪些JS请求?
74 0
Vue项目打包后都产生了哪些JS请求?
|
2月前
|
JavaScript 数据安全/隐私保护
如何在Vue组件中调用封装好的外部js文件方法
这篇文章介绍了如何在Vue组件中调用封装好的外部js文件方法,包括在Vue项目中全局引入外部js文件,并在组件中通过this.$myMethod()的方式调用外部js文件中定义的方法。
如何在Vue组件中调用封装好的外部js文件方法
|
2月前
|
JavaScript 前端开发
解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
这篇文章讨论了在JavaScript和Vue中如何避免定时器重复开启的问题,并提供了一个模拟场景和代码示例,演示了在开启新定时器前清除旧定时器的方法。
解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
|
2月前
|
JavaScript
Vue进阶篇(二)-彻底改变 Vue.js 状态管理:深入探讨Vue 3 Setup中的DefineModel
Vue进阶篇(二)-彻底改变 Vue.js 状态管理:深入探讨Vue 3 Setup中的DefineModel
|
2月前
|
JavaScript 前端开发 测试技术
Vue.js开发者必看!Vue Test Utils携手端到端测试,打造无懈可击的应用体验,引领前端测试新风尚!
【8月更文挑战第30天】随着Vue.js的普及,构建可靠的Vue应用至关重要。测试不仅能确保应用质量,还能提升开发效率。Vue Test Utils作为官方测试库,方便进行单元测试,而结合端到端(E2E)测试,则能构建全面的测试体系,保障应用稳定性。本文将带你深入了解如何使用Vue Test Utils进行单元测试,通过具体示例展示如何测试组件行为;并通过Cypress进行E2E测试,确保整个应用流程的正确性。无论是单元测试还是E2E测试,都能显著提高Vue应用的质量,让你更加自信地交付高质量的应用。
45 0
下一篇
无影云桌面