-
java入门之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>
栏目列表
最新更新
必知必会之Lambda表达式
Dubbo服务暴露分析
策略模式的学习之道
SpringBoot(一) 入门介绍
Java连载85-集合的Contains和Remove方法
Jdk14 都要出了,Jdk9 的新特性还不了解一
Docker学习笔记(2):使用Dockerfile构建镜像
IDEA设置
springboot~集成DataSource 与 Druid监控配置
《 Java 编程思想》CH08 多态
.Net Standard(.Net Core)实现获取配置信息
Linux PXE + Kickstart 自动装机
Shell 编程 基础
Shell 编程 条件语句
CentOS8-网卡配置及详解
Linux中LVM逻辑卷管理
1.数码相框-相框框架分析(1)
Ubuntu armhf 版本国内源
Linux中raid磁盘阵列
搭建简易网站
Dubbo(五):深入理解Dubbo核心模型Invok
vfp教程之VFP与Excel交互编程
vfp教程之在VFP中实现跟变式组合框及椭圆
SQL SERVER查询数据库所有表的大小,按照记
使用 SQL 服务器时,"评估期已过期"错
sql server无法连接本地服务器
使用sql语句创建表
VB操作Access数据库小记 ————————
access数据库远程连接
java web操作Access数据库