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博客。
目录
相关文章
|
存储 JavaScript 前端开发
使用CDN方法的方式进行Vue.js的安装
最近公司需要进行一些前端的开发工作用到了Vue前端框架,所以准备自学Vue,顺便几下学习的过程以及一些问题。
938 0
使用CDN方法的方式进行Vue.js的安装
|
2月前
|
JavaScript 前端开发 Java
vue-day01 使用cdn引入使用
文章介绍了Vue.js的基础用法,包括数据绑定、条件渲染、列表渲染、事件处理等。通过示例代码展示了如何使用Mustache语法、v-once指令、v-html指令、v-bind和v-on指令,以及动态参数、修饰符和指令缩写。这些基础知识为初学者提供了Vue.js的使用入门。
vue-day01 使用cdn引入使用
|
5月前
|
存储 网络协议 安全
必知的技术知识:DNS资源纪录(ResourceRecord)介绍
必知的技术知识:DNS资源纪录(ResourceRecord)介绍
|
JavaScript 前端开发 CDN
vue项目中使用CDN引入
vue项目中使用CDN引入
1834 1
|
5月前
|
JavaScript
|
JavaScript CDN
JS:NPM发布一个Vue组件UI库并使用CDN引入使用
JS:NPM发布一个Vue组件UI库并使用CDN引入使用
549 0
|
4月前
【vue2】切换页面之后滚动条停留在上个页面的位置,解决方案
【vue2】切换页面之后滚动条停留在上个页面的位置,解决方案
384 6
|
前端开发 JavaScript CDN
Nuxt.js 本地(CDN 远程)JS/CSS 全局(单页面)导入
Nuxt.js 本地(CDN 远程)JS/CSS 全局(单页面)导入
583 0
|
6月前
|
前端开发 UED 容器
【专栏:CSS进阶篇】CSS Grid布局:构建复杂的二维布局
【4月更文挑战第30天】CSS Grid布局是二维布局系统,适用于复杂页面结构,如页眉、主体和侧边栏。通过定义网格线和单元格,能轻松创建行和列。基本语法包括设置容器为grid容器,定义`grid-template-rows`和`grid-template-columns`。高级特性包括命名网格线、网格区域、网格间隙、重复网格线和自动填充。在实际应用中,CSS Grid能有效提升开发效率和用户体验,尤其在响应式设计和复杂布局场景下。
103 0
|
JavaScript CDN
js:Vue2.js中使用CDN方式引入vueuse
js:Vue2.js中使用CDN方式引入vueuse
735 0