vue的roter使用
1在src下建立router文件夹,再建立router.js
import Vue from 'vue'
import Router from 'vue-router'
import home from '../components/home'
import page01 from '../components/page01'
import page02 from '../components/page02'
import page01A from '../components/page01/page01-A'
import page01B from '../components/page01/page01-b'
import pageEnd from '../components/page01/B/end' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'home',
component: home
},
{
path: '/home',
name: 'home',
component: home
},
{
path: '/page01',
name: 'page01',
component: page01,
children: [
{
path: 'page01-a',
name: 'page01A',
component: page01A
},
{
path: 'page01-b',
name: 'page01B',
component: page01B,
children: [
{
path: 'end',
name: 'pageEnd',
component: pageEnd
}
]
}
]
},
{
path: '/page02',
name: 'page02',
component: page02
}
]
})
2.第二步 设置main.js
import VueRouter from 'vue-router';
import router from './router/router';
Vue.use(VueRouter); Vue.prototype.$goRoute = function (index) {
this.$router.push(index)
} /* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App)
});
第三步:写页面
<template>
<div>
<div>
<ul>
<li v-for="item in links"><a @click="$goRoute(item.route)">{{item.text}}</a></li>
</ul>
<router-view></router-view>
</div>
</div> </template> <script type="text/ecmascript-6">
export default {
name: 'app',
data () {
return {
links: [
{
text: '胡萝卜',
route: '/home'
},
{
text: '大白菜',
route: '/page01'
},
{
text: '水蜜桃',
route: '/page02'
}
]
}
}
}
</script>
vue的roter使用的更多相关文章
- vue 登录跳转
前几次做登录处理,都是写一个公用方法,然后在对应的路由页面调用,即判断是不是处于登录状态,如果不是,就返回登录页面. let exit = (vm)=>{ let login = session ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程(2)相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
随机推荐
- jQuery Pagination分页插件--刷新
源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...
- C#的接口基础教程之六 接口转换
C#中不仅支持.Net 平台,而且支持COM平台.为了支持 COM和.Net,C# 包含一种称为属性的独特语言特性.一个属性实际上就是一个 C# 类,它通过修饰源代码来提供元信息.属性使 C# 能够支 ...
- CentOS 7 环境下挂载新磁盘
最近某个项目需要给数据库服务器添加磁盘,由于太久没搞过,就给虚拟机加了10G的空间,用来练习一下磁盘的挂载 一. 首先执行"fdisk -l"命令,查看磁盘信息 [root@loc ...
- jquery/js/a标签实现当前页面跳转的两种方法
在逛购物网站首页时经常看到侧边导航栏,当我们点击导航栏中某一项时会跳转到当前页面的某一处 有两种方法实现,一种是利用js计算好各位置的高度,通过绑定事件使页面跳转到指定位置,另一种是利用a标签进行当前 ...
- thinkphp3.2.3如何只改变地址url中的某一个分隔符,其它保持不变
今天教大家一个关于使用thinkphp3.2.3改变只改变地址url中的某一个分隔符的方法,首先大家来看看这个地址! 它的原始地址应该是/Home/Index/index/page/2.html,那我 ...
- Python学习笔记:math模块(数学),random模块(随机数)
math模块 math模块用于数学意义上的一些计算,常用的方法有: math.pi:PI的值(3.141592653589793). math.floor(x):返回一个小于等于x的最大整数(浮点类型 ...
- 使用JFreeChart生成报表
1.JFreeChart简介 JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications,servlets以及JSP等使用所设计. ...
- 笔记-编程-IO模型
笔记-编程-IO模型 1. 简介 常用IO模型 1) 同步阻塞IO(Blocking IO) 2) 同步非阻塞IO(Non-blocking IO) 3) IO ...
- Linux下Oracle JDK替换Open JDK
Oracle的产品需要Oracle JDK,但是Linux发行版附带的都是开源的Open JDK,这里给出的方法是在不删除原有Open JDK的情况下,安装Oracle JDK 环境 系统:CentO ...
- 【MySQL】资源列表
1.使用yum方式安装MySQL https://blog.csdn.net/zl570932980/article/details/78934601 2.安装Xtrabackup备份工具 https ...