vue2 vue-rout
2024-10-09 20:32:27
vue 2.0的路由比起1.0简单了许多,分为以下几个步骤;
1.创建路由块和视图块;
to里面是要切换的路径名称
<div id="app">
<div>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
2.写组件
var Home={
template:'<h3>我是主页</h3>'
};
var News={
template:'<h3>我是新闻</h3>'
};
3、
//配置路由
var routes=[
{path:'/home', component:Home},
{path:'/news', component:News},
//重镜像,相当于是主页
{path:'*', redirect:'/home'}
];
4、创建路由实例
var router = new VueRouter({
routes :routes //routes是一个参数
})
5、
//最后挂到vue上
new Vue({
router,
el:'#box'
});
效果:
最新文章
- [Computational Advertising] 计算广告学笔记之基础概念
- 1005. Spell It Right (20)
- 【LeetCode OJ】Same Tree
- 一种在视频OBJECT标签上放置均分四个区域的框选方法
- asynchronous vs non-blocking
- C# 正则表达式 学习笔记二
- BootStrap中Affix控件的使用方法及如何保持布局的美观
- Android studio教程:[5]活动的生命周期
- struts OGNL数据标签
- Hadoop-2.x启动HDFS和YARN的方式
- hibernate框架学习笔记12:查询优化
- 配置Android开发环境遇到的问题
- cf1121F. Compress String(后缀自动机)
- 十四、怎么获取data-id中的值
- eclipse新建maven项目默认jre为1.5的问题
- windows上安装Maven与Gradle
- 并发编程:IO多路复用。
- [SDOI2009]HH的项链 BZOJ1878
- goldengate 过滤对某张表的复制操作
- 【Unix网络编程】 chapter5 TCP客户,服务器程序实例
热门文章
- redis在spring-boot中的应用
- Qt creator中文输入—fctix-qt5 源码编译 libfcitxplatforminputcontextplugin.so
- python 抓取金融数据,pandas进行数据分析并可视化系列 (一)
- ML笔记:Gradient Descent
- MySQL学习——基本命令(1)
- WPF 外发光效果
- slurm任务调度系统部署和测试(一)
- windows10版本1709 在桌面和文件中点击右键,会引起卡顿
- Caffe-5.2-(GPU完整流程)训练(依据googlenet微调)
- jsp中EL表达式不起作用的问题1