vue 路由简单实例
来源:互联网 发布:java.util.base64 编辑:程序博客网 时间:2024/06/05 01:11
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>首页</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--mui标准css--> <link rel="stylesheet" href="https://static.gushistory.com/css/mui.min.css"> <!--font-size=100px -- rem自适应--> <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth >= 320) { docEl.style.fontSize = '100px'; } else { docEl.style.fontSize = 100 * (clientWidth / 320) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script> <!--引入vue.js--> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script> <!--<script src="vue_code/vue.min.js"></script>--> <style> </style></head><body><div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view></div><script> // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter) // 1. 定义(路由)组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器, // 或者,只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 创建 router 实例,然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // (缩写)相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由, // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app') // 现在,应用已经启动了!</script></body></html>
阅读全文
0 0
- vue 路由简单实例
- vue动态路由匹配实例
- vue初探--路由简单使用
- vue简单路由(一)
- vue简单路由(一)
- vue-router简单实例
- vue实例简单方法
- vue.js简单实例
- Vue-Router的路由实例构造配置
- Vue--router--->>>一个简单的路由
- vue-router 路由基础简单介绍
- vue之vue实例简单方法
- Vue实例的简单方法
- vue简单实例(todolist)
- vue+webpack+vue-router+vuex+vue-resource简单实例
- Vue路由
- vue 路由
- Vue路由
- java基础总结---第一季
- 事件循环机制-任务队列、webAPI、JS主线程的相互协同
- 揭秘阿里小蜜:基于检索模型和生成模型相结合的聊天引擎 | PaperDaily #25
- 谈谈单元测试之(四):测试工具 TestNG
- 翻译内核uvcvideo.txt
- vue 路由简单实例
- 数据库数据操作
- Curator典型使用场景之分布式Barrier。
- Tensorflow的反卷积(上采样)
- org.xml.sax.SAXParseException; 元素内容必须由格式正确的字符数据或标记组成
- Java数据类型转换
- WebSocket简介和例子
- decaf/internal/net/ssl/openssl/OpenSSLSocket.cpp:667:50: error: invalid use of incomplete type ‘X509
- 算法导论详解(1) 第二章算法基础+python实现