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上的参数

相关文章
|
JavaScript
学习和分享关于 Vue.js 的路由(vue-router)
学习和分享关于 Vue.js 的路由(vue-router)
115 2
Vue3+Vite+Js项目搭建之三:vue-router 路由构建
Vue3+Vite+Js项目搭建之三:vue-router 路由构建
491 1
|
JavaScript API Go
Vue | Vue.js 全家桶 - Vue-Router详解(二)
Vue | Vue.js 全家桶 - Vue-Router详解(二)
246 0
|
移动开发 JavaScript 前端开发
Vue | Vue.js 全家桶 - Vue-Router详解(一)
Vue | Vue.js 全家桶 - Vue-Router详解(一)
248 0
|
前端开发 JavaScript CDN
Nuxt.js 本地(CDN 远程)JS/CSS 全局(单页面)导入
Nuxt.js 本地(CDN 远程)JS/CSS 全局(单页面)导入
873 0
|
JavaScript 前端开发 API
Vue.js:Vue-Router动态路由从服务器接口获取路由数据
Vue.js:Vue-Router动态路由从服务器接口获取路由数据
890 0
|
JavaScript CDN
js:Vue2.js中使用CDN方式引入vueuse
js:Vue2.js中使用CDN方式引入vueuse
1030 0
|
JavaScript CDN
js:Vue2.js通过CDN方式引入模板
js:Vue2.js通过CDN方式引入模板
578 0
|
2月前
|
缓存 前端开发 JavaScript
适合阿里云CDN分发的文件类型有哪些?
静态文件如网页、图片、视频等适合CDN分发,可提升加载速度,减轻源站压力。动态、私有或频繁变更内容则不适合。合理选择资源包,助力高效上云。
|
2月前
|
CDN
阿里云CDN计费价格如何收费的?一文看懂
阿里云CDN计费包含基础费用与增值服务。基础费用可选按流量、带宽峰值或月结95带宽计费,默认按流量计费;增值服务如HTTPS、QUIC、WAF、实时日志等按使用量收费,不使用不计费。支持资源包抵扣,详情参考官方文档。
455 10