vue-router单页面路由
更新时间：2017年06月17日 15:52:40 作者：孙三峰
这篇文章主要为大家详细介绍了vue-router单页面路由的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中，有一个类库叫做vue-router，是用来做单页面路由的。做路由一般分为四个步骤：
- 准备一个根组件 vue.extend()；
- 需要做路由的内容准备 template；
- 准备路由 new VueRouter（）；
- 关联路由 map
- 启动路由 start(App,'#box')；//第一个参数是准备的根组件，第二个参数是要捆绑的位置就是自己定义的id中
github上vue-router下载地址：https://github.com/vuejs/vue-router
关于路由跳转的简单代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<script type="text/javascript" src="js/vue-resource.js" ></script>
<title></title>
</head>
<body>
<div id="box">
<ul>
<li>
<a v-link="{path:'/home'}">我是第一个a</a>
</li>
<li >
<a v-link="{path:'news'}">我是第二个a</a>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
</body>
<script>
//1.准备一个根组件
var App=Vue.extend();
//2.Home News 组件准备
var Home=Vue.extend({
template:'<h3>我是第一个a的内容页</h3>'
});
var News=Vue.extend({
template:'<h3>我是第二个a的内容页</h3>'
})
//3.准备路由
var router = new VueRouter();
//4.关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
})
//5.启动路由
router.start(App,'#box');
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
最近写大屏,用到elementplus中的el-table,为了让显示效果好看一点,需要把表格的白色背景调整为透明,与整个背景融为一体,本文给大家介绍ElementPlus表格中的背景透明解决方案,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了vue做移动端适配最佳解决方案(亲测有效)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
vue前端获取/切换麦克风、播放采集音频和采集音量大小完整代码
这篇文章主要给大家介绍了关于vue前端获取/切换麦克风、播放采集音频和采集音量大小的相关资料,文中通过图文以及代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12
本文主要介绍了vue3之Suspense加载异步数据的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了Vue自定义指令中无法获取this的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本篇文章中主要介绍了Vue中img的src属性绑定与static文件夹实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-05-05
这篇文章主要为大家详细介绍了基于vue的fullpage.js单页滚动插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
.env文件是vue运行项目时的环境配置文件，这篇文章主要介绍了vue多环境配置之 .env配置文件,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了基于vue框架手写一个notify插件实现通知功能的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了关于el-col的使用,占据宽度的应用解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
最新评论