Vue(十)---路由
2020-02-04 16:01:08来源:博客园 阅读 ()
Vue(十)---路由
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。
需要引入vue-router.js
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"> <div class="menu"> <!-- router-link 相当于就是超链 to 相当于就是 href --> <router-link to="/user">用户管理</router-link> <router-link to="/product">产品管理</router-link> <router-link to="/order">订单管理</router-link> </div> <div class="workingRoom"> <!-- 点击上面的/user,那么/user 对应的内容就会显示在router-view 这里 --> <router-view></router-view> </div> </div> <script> /* * 申明三个模板( html 片段 ) */ var user = { template: '<p>用户管理页面的内容</p>' }; var second = { template: '<p>产品管理页面的内容</p>' }; var order = { template: '<p>订单管理页面的内容</p>' }; /* * 定义路由 */ var routes = [ { path: '/', redirect: '/user'}, // 这个表示会默认渲染 /user,没有这个就是空白 { path: '/user', component: user }, { path: '/product', component: second }, { path: '/order', component: order } ]; /* * 创建VueRouter实例 */ var router = new VueRouter({ routes:routes }); /* * 给vue对象绑定路由 */ new Vue({ el:"#app", router }) </script>
原文链接:https://www.cnblogs.com/crazy-lc/p/12258583.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:Spring整合MyBatis
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后 2020-06-10
- java 在线网络考试系统源码 springboot mybaits vue.js 前后 2020-05-31
- vue 页面跳转的两种方式 2020-05-20
- error in ./src/views/demo/ueditor.vue Module build f 2020-04-26
- vue-cli学习笔记 vue-cli学习笔记 MVC、MVP、MVVM 2020-04-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash